React中有哪些构建组件的方式？

React中有哪些构建组件的方式

1. 函数定义的无状态组件

   • 语法：

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

   • 特点：

     • 组件不会实例化，无法访问到组件内的this对象，但整体渲染性能提升
     • 无法访问生命周期方法，不能参与各个生命周期的管理
     • 无状态，所以不涉及state的操作，只能根据传入的props进行展示

2. es6形式的React.Component定义的组件

   • 语法：

     class Component extends React.Component {
         constructor(props) {
             super(props);
         }	
     
         handleClick() {
             console.log('hello world');
         }
     
         render() {
             return(
                 <div onClick={() => {this.handleClick()}}>React Component</div>
             )
         }
     }

   • 特点：

     • 有状态，会被实例化，可以访问组件生命周期
     • 成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取到当前组件实例对象

3. es5原生方式React.createClass定义组件

   • 语法：

     var Component = React.createClass({
         render: function(){
             <div>React Component</div>
         }
     })

   • 特点：

     • 有状态，会被实例化，可以访问组件生命周期
     • 会自动绑定this，导致不必要的性能开销

这几种构建方法的区别

	React.createClass	Function	Class
State	Yes	No	Yes
Life Cycle	Yes	No	Yes
This	Auto Bind	Can’t access this: no instance	Manual Bind
Performance	Low	Hight(stateless)	Low
Status	Deprecated?	In Use	In Use