React组件

组件

组件是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。