class CounterButton extends React.PureComponent { constructor(props) { super(props); this.state = {count: 1}; } render() { return ( <button color={this.props.color} onClick={() => this.setState(state => ({count: state.count + 1}))}> Count: {this.state.count} </button> ); } }
大多数情况下， 我们使用PureComponent能够简化我们的代码，并且提高性能，但是PureComponent的自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较(shadow comparison)，当props或者state本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的props和state发生了变化，但组件却没有更新的问题。
例如下面代码有一个ListOfWords组件来将单词数组拼接成逗号分隔的句子，它有一个父组件WordAdder让你点击按钮为单词数组添加单词，但他并不能正常工作：
class ListOfWords extends React.PureComponent { render() { return <div>{this.props.words.join(',')}</div>; } } class WordAdder extends React.Component { constructor(props) { super(props); this.state = { words: ['marklar'] }; this.handleClick = this.handleClick.bind(this); } handleClick() { // 这个地方导致了bug const words = this.state.words; words.push('marklar'); this.setState({words: words}); } render() { return ( <div> <button onClick={this.handleClick} /> <ListOfWords words={this.state.words} /> </div> ); } }
这种情况下，PureComponent只会对this.props.words进行一次浅比较，虽然数组里面新增了元素，但是this.props.words与nextProps.words指向的仍是同一个数组，因此this.props.words !== nextProps.words 返回的便是flase，从而导致ListOfWords组件没有重新渲染,笔者之前就因为对此不太了解，而随意使用PureComponent，导致state发生变化，而视图就是不更新，调了好久找不到原因~。
最简单避免上述情况的方式，就是避免使用可变对象作为props和state，取而代之的是每次返回一个全新的对象,如下通过concat来返回新的数组：
handleClick() { this.setState(prevState => ({ words: prevState.words.concat(['marklar']) })); }
你可以考虑使用Immutable.js来创建不可变对象，通过它来简化对象比较，提高性能。
这里还要提到的一点是虽然这里虽然使用了Pure这个词，但是PureComponent并不是纯的，因为对于纯的函数或组件应该是没有内部状态。
4.Stateless Functional Component
上面我们提到的创建组件的方式，都是用来创建包含状态和用户交互的复杂组件，当组件本身只是用来展示，所有数据都是通过props传入的时候，我们便可以使用Stateless Functional Component来快速创建组件。例如下面代码所示:
import React from 'react'; const Button = ({ day, increment }) => { return ( <div> <button onClick={increment}>Today is {day}</button> </div> ) } Button.propTypes = { day: PropTypes.string.isRequired, increment: PropTypes.func.isRequired, }
这种组件，没有自身的状态，相同的props输入，必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子，所以不用继承自Component显得更简洁。
对比
createClass vs Component
对于React.createClass 和 extends React.Component本质上都是用来创建组件，他们之间并没有绝对的好坏之分，只不过一个是ES5的语法，一个是ES6的语法支持，只不过createClass支持定义PureRenderMixin,这种写法官方已经不再推荐，而是建议使用PureComponent。
pureComponent vs Component
通过上面对PureComponent和Component的介绍，你应该已经了解了二者的区别:PureComponent已经定义好了shouldUpdateComponent而Component需要显示定义。
Component vs Stateless Functional component
Component包含内部state，而Stateless Functional Component所有数据都来自props，没有内部state;
1.Component 包含的一些生命周期函数，Stateless Functional Component都没有，因为Stateless Functional
2.component没有shouldComponentUpdate,所以也无法控制组件的渲染，也即是说只要是收到新的props，Stateless Functional Component就会重新渲染。
3.Stateless Functional Component 不支持Refs
选哪个？
这里仅列出一些参考:
1.createClass， 除非你确实对ES6的语法一窍不通，不然的话就不要再使用这种方式定义组件。