在做react项目开发中创建组件的三种方式

第一种：函数式定义的无状态组件

用途：只是为了创建纯展示组建，这类组件只负责根据传入的props属性来展示组建，不涉及对组件state状态的操作，无状态组件只有一个render方法输出，

例如：function HelloComponent(props, /* context */) { 

return <div>Hello {props.name}</div>

}

ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

特点：组件只有一个render函数输出，不存在组件实例化过程，不必占用内存，性能比较好；

 组件中没有this对象，不能对组件的虚拟dom进行索引和设置；

 组件没有生命周期。

                       组件只能被动接受props，无法进行状态改变；

第二种：react.createClass(是es5的原生js来实现的react组件)

例如：let App = React.createClass({

                           }}

这样的写法是创建有状态的组件，这样的组件被实例化，会占用内存，并且有生命周期，

特点：这样创建组件会自绑定函数方法，增加代码过时的可能性；

第三种：React.Component(是以es6的形式来创建组件的，是目前大型公司常用的创建有状态组件的一种方式)

相比于react.createclass可以更好的实现代码复用；

例如：class App extends React.Component{

constructor(props){

super(props);

  this.state={ item:"",page:props.initvalue    }//设置初始化状态

  this.family = {0:"shuai",1:"zhenshuai" } //设置的初始的对象

  this.handleclick = this.handleChange.bind(this);//es6类中函数必须手动绑定

}

render（）｛

return（

）

｝

}

App.propTypes = {iniitvalue:react.props.string };

App.defaultProps = { initvalue:""}

通过react.component创建有状态组件的特点

组件中每一个成员的this不会自动绑定，需要开发者手动绑定，不然this 不是当前的组件实例化对象。

绑定的方法：可以在构造函数中完成绑定， this.handleClick = this.handleClick.bind(this); //构造函数中绑定也可以在调用时                                                                     完成绑定， <div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定也可以使用arrow function 的指                                                                      向绑定。 <div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定

组建的初始状态state的配置不同，

react.createclass创建的组件，其状态在getinitstate中配置的状态的初始；

react.component创建的组件，其状态实在construstor中像初始话组件属性一样声明的；