談一談建立React Component的幾種方式

當咱們談起React的時候，多半會將注意力集中在組件之上，思考如何將頁面劃分紅一個個組件，以及如何編寫可複用的組件。但對於接觸React不久，尚未真正用它作一個完整項目的人來講，理解如何建立一個組件也並不那麼簡單。在最開始的時候我覺得建立組件只須要調用createClass這個api就能夠了；但學習了ES6的語法後，又知道了能夠利用繼承，經過extends React.component來建立組件；後來在閱讀別人代碼的時候又發現了PureComponent以及徹底沒有繼承，僅僅經過返回JSX語句的方式建立組件的方式。下面這篇文章，就將逐一介紹這幾種建立組件的方法，分析其特色，以及如何選擇使用哪種方式建立組件。

幾種方法

1.createClass

若是你尚未使用ES6語法，那麼定義組件，只能使用React.createClass這個helper來建立組件，下面是一段示例：

var React = require("react");
var Greeting = React.createClass({
  
  propTypes: {
    name: React.PropTypes.string //屬性校驗
  },

  getDefaultProps: function() {
    return {
      name: 'Mary' //默認屬性值
    };
  },
  
  getInitialState: function() {
    return {count: this.props.initialCount}; //初始化state
  },
  
  handleClick: function() {
    //用戶點擊事件的處理函數
  },

  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
module.exports = Greeting;

這段代碼，包含了組件的幾個關鍵組成部分，這種方式下，組件的props、state等都是以對象屬性的方式組合在一塊兒，其中默認屬props和初始state都是返回對象的函數，propTypes則是個對象。這裏還有一個值得注意的事情是，在createClass中，React對屬性中的全部函數都進行了this綁定，也就是如上面的hanleClick其實至關於handleClick.bind(this) 。

2.component

由於ES6對類和繼承有語法級別的支持，因此用ES6建立組件的方式更加優雅，下面是示例：

import React from 'react';
class Greeting extends React.Component {

  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.handleClick = this.handleClick.bind(this);
  }
  
  //static defaultProps = {
  //  name: 'Mary'  //定義defaultprops的另外一種方式
  //}
  
  //static propTypes = {
    //name: React.PropTypes.string
  //}
  
  handleClick() {
    //點擊事件的處理函數
  }
  
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Greeting.propTypes = {
  name: React.PropTypes.string
};

Greeting.defaultProps = {
  name: 'Mary'
};
export default Greating;

能夠看到Greeting繼承自React.component,在構造函數中，經過super()來調用父類的構造函數，同時咱們看到組件的state是經過在構造函數中對this.state進行賦值實現，而組件的props是在類Greeting上建立的屬性，若是你對類的屬性和對象的屬性的區別有所瞭解的話，大概能理解爲何會這麼作。對於組件來講，組件的props是父組件經過調用子組件向子組件傳遞的，子組件內部不該該對props進行修改，它更像是全部子組件實例共享的狀態，不會由於子組件內部操做而改變，所以將props定義爲類Greeting的屬性更爲合理，而在面向對象的語法中類的屬性一般被稱做靜態(static)屬性，這也是爲何props還能夠像上面註釋掉的方式來定義。對於Greeting類的一個實例對象的state，它是組件對象內部維持的狀態，經過用戶操做會修改這些狀態，每一個實例的state也可能不一樣，彼此間不互相影響，所以經過this.state來設置。

用這種方式建立組件時，React並無對內部的函數，進行this綁定，因此若是你想讓函數在回調中保持正確的this，就要手動對須要的函數進行this綁定，如上面的handleClick，在構造函數中對this 進行了綁定。

3.PureComponet

咱們知道，當組件的props或者state發生變化的時候：React會對組件當前的Props和State分別與nextProps和nextState進行比較，當發現變化時，就會對當前組件以及子組件進行從新渲染，不然就不渲染。有時候爲了不組件進行沒必要要的從新渲染，咱們經過定義shouldComponentUpdate來優化性能。例如以下代碼：

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

shouldComponentUpdate經過判斷props.color和state.count是否發生變化來決定需不須要從新渲染組件，固然有時候這種簡單的判斷，顯得有些多餘和樣板化，因而React就提供了PureComponent來自動幫咱們作這件事，這樣就不須要手動來寫shouldComponentUpdate了：

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並非純的，由於對於純的函數或組件應該是沒有內部狀態，對於stateless component更符合純的定義，不瞭解純函數的同窗，能夠參見這篇文章。

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

1. Component包含內部state，而Stateless Functional Component全部數據都來自props，沒有內部state;

2. Component 包含的一些生命週期函數，Stateless Functional Component都沒有，由於Stateless Functional component沒有shouldComponentUpdate,因此也沒法控制組件的渲染，也便是說只要是收到新的props，Stateless Functional Component就會從新渲染。

3. Stateless Functional Component 不支持Refs

選哪一個？

這裏僅列出一些參考:

1. createClass， 除非你確實對ES6的語法一竅不通，否則的話就不要再使用這種方式定義組件。

2. Stateless Functional Component, 對於不須要內部狀態，且用不到生命週期函數的組件，咱們可使用這種方式定義組件，好比展現性的列表組件，能夠將列表項定義爲Stateless Functional Component。

3. PureComponent/Component，對於擁有內部state，使用生命週期的函數的組件，咱們可使用兩者之一，可是大部分狀況下，我更推薦使用PureComponent，由於它提供了更好的性能，同時強制你使用不可變的對象，保持良好的編程習慣。

參考文章

optimizing-performance.html#shouldcomponentupdate-in-action
pureComponent介紹
react-functional-stateless-component-purecomponent-component-what-are-the-dif
4 different kinds of React component styles
react-without-es6
react-create-class-versus-component