一、 首先縷清楚React.createElement、React.createClass、React.Component之間的關系

　　　 1. React.createElement(HTML element) & React.createClass(javascript DOM)

　　　　　>> 使用Javascript DOM創建HTML元素　　　

// 創建lu元素
var ul = document.createElement(‘ul‘)
// 創建class屬性
var listClass = document.createAttribute(‘class‘)
//  添加class值為listClass
 

      listClass.value(‘listClass‘);
// 將class添加至ul中
ul.setAttribute(listClass )

// 將ul添加值body中
document.body.appendChild(ul);

　　　　>> 使用React.createElement創建元素 [divClass可以直接渲染到body中，或者作為createElement屬性傳入]

//使用createClass創建div組件類
var divClass = React.createClass({
  render() {
     return (
       
 
<div className=‘testClass‘>測試文字</div>
    )
  }
})

// 使用createElement創建div元素
var div = React.createElement(‘div‘, {className: ‘divClass‘}, ‘測試文字‘)
// 或者
var div = React.createElement(divClass, null, null)

// 添加至body

ReactDOM.render(
  div | divClass,
  document.body           
)    

　二、ES5創建組件 ： React.createClass

var Item = React.createClass({
   // 默認為組件名
   displayName: ‘Item‘ ,
   // 設置屬性類型檢測
   propTypes:{},
   // 默認屬性             
   getDefaultProps() {     
      return {
        propsData: ‘測試props‘
      }
    },
     // 初始化數據
     getInitialState() {       
        return {
           stateData: ‘測試state‘
         }
     },
     //外部函數或組件
     mixins: [foo, bar], 
     // 測試方法 
     testFun() {  
        // this返回當前react實例         
        console.log(this)   
     },
     // 組件渲染
     render() {
         return (<div data={this.props.propsData} onClick={this.testFun}>{this.state.stateData}</div>)
     }
})

ReactDOM.render(
  <Item/>,
  document.body    
)    

　三 、ES6創建組件 ： React.Component

>> this.testFun = this.testFun.bind(this) 和.bind(this) 二選一

class Item extends React.Component {
  // 構造器初始化props和state
  constructor(props) {
    super(props)
    this.state = {
       stateData: ‘初始化state‘
    },
    // 如div內不使用bind(this)綁定實例this, 則需在構造器中綁定
   this.testFun = this.testFun.bind(this)
  }
  // 沒有mixins
  // 默認props
  static defaultProps() {
    return {
      propData: ‘默認props‘
     }
  }
  testFun() {
    console.log(this)
  }
  render() {
     return (
        <div data={this.props.propData} onClick={this.testFun.bind(this)}>{this.state.stateData}</div>
      )
   }
}
// 類型檢測放在外面
Item.propTypes = {}

ReactDOM.render(
   <Item/>, 
   document.body
)

React創建組件的不同方式（ES5 & ES6）