React创建组件的不同方式（ES5 & ES6）

Posted 2020-10-30 骑着小毛驴过冬的八阿哥

　一、 首先缕清楚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
)