React创建组件的三种方式及其区别

React创建组件的三种方式及其区别

三种方式：

1. 函数式定义的

   无状态组件

2. es5原生方式

   React.createClass

   定义的组件
3. es6形式的

   extends React.Component

   定义的组件

无状态函数式组件

function HelloComponent(props, /* context */) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

只带有一个render方法的组件类，通过函数形式或者箭头函数形式在创建，并且无state。

不会被实例化；不能访问this，因为没有实例化过程；无法访问生命周期方法；只能访问输入的props，不会有副作用。

React.Component

class InputControlES6 extends React.Component {}

React.Component

React.createClass

React.Component

• 在构造函数中完成绑定；
• 在调用时使用

  method.bind(this)

  来完成绑定；
• 使用arrow function来绑定。

constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}

<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定

<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定