创建 React Component 的几种方式

1.createClass 

var Greeting = React.createClass({

    getInitialState:function(){},

    handleClick:function(){},

    render:function(){return <div></div>}

})

module.exports = Greeting;

这里一个值得注意的事情是，在 createClass 中，React 对属性中的所有函数都进行了 this 绑定，也就是如上面的 handleClick 其实相当于 handleClick.bind(this)

2.component

class Greeting extends React.Component{

    constructor(props){

        super(props);

        this.state = { count : props.initialCount };

        this.handleClick = this.handleClick.bind(this);

    }

    handleClick(){}

    render(){ return <div></div> }

}

 export default Greeting;

Greeting继承自React.Component，在构造函数中，通过super（）来调用父类的构造函数。

用这种方式创建组件时，React并没有对内部的函数，进行this绑定，所以如果你想让函数在回调中保持正确的this，就要手动对需要的函数进行this绑定，如上面的handleClick，在构造函数中对this进行了绑定

3.PureComponennt

当组件的props或者state发生变化的时候，React会对组件当前的 Props 和 State 分别与 nextProps 和 nextState 进行比较，当发生变化时，就会对当前组件以及子组件进行重新渲染，否则就不渲染。有时候为了避免组件进行不必要的重新渲染，我们通过定义 shouldComponentUpdate 来优化性能。

大多数情况下，我们使用 PureComponent 能够简化我们的代码，并且提高性能，但是 PureComponent 可以自动为我们添加的 shouldComponentUpdate 函数，只是对 props 和 state 进行浅比较。当 props 或者 state 本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的 props 和 state 发生了变化，但组件没有更新的问题。

所以我理解所谓的 PureComponent 就是不写 shouldComponentUpdate 方法，但是这里要注意所引起的问题

4.Stateless Functional Component

当组件本身只是用来展示，所有数据都是通过 props 传入的时候，我们便可以使用 Stateless Functional Component 来快速创建组件

const Button = ({day,increment}=>{   //es6的箭头函数

    return <div><button onClick = {increment}>Today is {day}</button></div>

})

这种组件，么有自身的状态，相同的props传入，必然会获得完全相同的组件展示，因为不需要关心组件的一些生命周期函数和渲染的钩子，所以不用继承自Component显得更简洁

参考地址