组件
组件是React的核心、精髓。组件有输入、输出以及自身状态，分别对应props、render、state，相信稍微用过React的同学都很清楚。
一般的，我们现在常用的组件创建方式如下：
import React, { Component } from 'react';
class App extends Component {
render() {
return <h1>你好👋</h1>
}
}
这种目前最常见的书写方式:Component, 是因为ES6的出现。当然，还有其他的创建组件方式。
createClass
通过createClass来创建组件是最原始的方式：
import React, { Component } from 'react';
const App = React.createClass({
getDefaultProps: function() {
return { name: 'Jack' }
}
getInitialState: function() {
return { word: 'hello word' }
}
render: function() {
return <h1>你好👋, { this.state.word }, { this.props.name }</h1>;
}
});
Functional Component
或许你也听过函数式组件，这也是创建组件的一种方式。由于一些组件没有自身状态，也称为无状态组件，此时我们就可以使用函数式组件，相比较而言，无状态组件的性能会优于状态组件。
import React from 'react';
function App(props) {
const { name } = this.props;
return <h1>你好, { name }</h1>;
}
很简单，就是一个普通的函数，将JSX return出去，可以说名副其实。
另外，通过前面class定义的类也是一个函数，只不过这里的函数式组件没有继承Component而已。
PureComponent
PureComponent是React15.3引入的一个全新的组件基类，用来代替之前的react-addons-pure-render-mixin。在React内部PureComponent继承自Component，并将isPureReactComponet属性置为true。
所以，React内部通过判断isPureReactComponent是否为true来区分是否PureComponent组件。
说了这么多，到底PureComponent 和 Component有什么区别呢？
因为前面提到，PureComponent继承自Component，所以功能几乎一致，区别也仅在于shouldComponentUpdate。在PureComponent中该生命周期不会直接返回true，而是会对属性和状态进行一个浅比较，注意，是浅比较，通过比较结果是否相等来决定是否重新渲染。
如果我们通过Component来模拟PureComponent大致如下：
import React, { Component } from 'react';
class App extends Component {
shouldComponentUpdate(nextProps, nextState) {
const { props, state } = this;
function shallowCompare(a, b) {
return a === b || Object.keys(a).every(k => a[k] === b[k]);
}
// 调用比较函数
return shallowCompare(nextProps, props) && shallowCompare(nextState, state);
}
}
总结
- 如果组件支持ES6写法， 建议使用Component的形式，否则使用createClass的形式；
- 如果组件没有自身状态，可以使用Functional Component形式，也就是函数式组件；
- 对于PureComponent和Component区别前面也已经介绍了，所以对于PureComponent的使用，和Component的使用情况一致，但是建议大家还是使用PureComponent。
