react建立組建的四種方式

起因：寫這篇文章主要是爲了加強本身的記憶，同時也是爲了分享一下咱們經常使用的建立組建的方法，主要是四種(createClass, component, PureComponet,Stateless Functional Component)，啓發來自於不知的博客呀，有興趣的人能夠去看看他的博客！

敘述： 咱們在用react的時候考慮最多的其實就是如何策劃組建的劃分，組建的嵌套，可以作到更省時、省力。作過了一個react的項目，目前依舊在繼續，一上來咱們就使用了es6的語法堂，用component來，仔細看過官方文檔後，發現不用es6語法的同時只能使用createClass。在寫組建的同時咱們也都會說到這兩個詞語，狀態組建和pure組建（純函數）。今天就來大概介紹一下各自的特色：

1、createClass

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //屬性校驗 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: 'Mary' 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
module.exports = FirstComponent;

這種方式下，組件的props、state等都是以對象object屬性的方式組合在一塊兒，在createClass中，React對屬性中的全部函數都進行了this綁定，也就是如上面的hanleClick其實至關於handleClick.bind(this) 。

2、component es6語法堂

import React from 'react';
class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
       count: props.initialCount
    };
  }
  static propTypes ＝ {
    name: React.PropTypes.string
  }
  statice props = {
    name: 'Mary'
  }
  handleClick() {
    //點擊事件的處理函數
  }
  
  render() {
    return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
  }
}
export default FirstComponent;

這段代碼指定了FirstComponent繼承extends React.Component的屬性，經過constructor來構函數，初始化state，this的綁定也在這裏面進行，由於這種方式react並無對this進行綁定，全部須要手動輸入綁定。這種方法建立組建由於繼承了component的屬性，所以這裏面能夠寫react的全部生命週期函數,例如componentDidMount等系列，並在函數內容經過this.state來改變狀態state，dom就會隨即刷新，也能夠手動靜止更新，具體的細節是在某個生命週期中進行，具體的能夠看看個人這篇文章

3、PureComponet

上面的方法中都不是純函數的構造，由於state是能夠在內容起到做用的，內容就能夠控制是否從新渲染狀態。
而這種方法我也不多用過，看過不少文章才明白！其實大多數狀況下咱們也很難用到這樣的方式，在官網的位置都不是很起眼，因此就大概複述一下－不知－博客的內容吧！

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發生了變化，但組件卻沒有更新的問題。固然仍是有解決的方法的，因此建議仍是少用。

4、Stateless Functional Component

上面提到的方法都包含了內部有交互和狀態的複雜的組建，若是組建自己就是用來展現的，那麼就能夠用stateless的方法來建立組建。

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,
}

export default Button;

若是像更改顯示的結果只能改變傳入的props;

以上就是四種建立組建的方式，來點我的的建議吧！

如今我公司的項目就是採用了第四種方式來進行組建的建立，那麼確定會有人問，那麼請求接口，返回數據從新渲染怎麼作，確定仍是會有一部分用到es6建立的方法，一部分採用stateless的方法，固然這種也是能夠的，不過看起來就會稍微的有些亂，用兩種方式定義組建也並非一個好的團隊應該看到的。因此給你們推薦一些react+webpack+react-redux 以及vda這種方式，具體的資料能夠參考這個上面說的很詳細，這種方式的優勢就在於將邏輯和展現徹底的分開了。

最後你們能夠根據本身的喜歡以及項目的要求選擇一種方式來進行組建的建立，方便本身的記憶，也供你們參考使用，同時也來提一下更好的方法。

參考：
http://www.cnblogs.com/Unknw/...
https://segmentfault.com/a/11...