react建立組建的四種方式

JeremyChen發表於2017-04-26
React

原由：寫這篇文章主要是為了增強自己的記憶，同時也是為了分享一下我們常用的建立組建的方法，主要是四種(createClass, component, PureComponet,Stateless Functional Component)，啟發來自於不知的部落格呀，有興趣的人可以去看看他的部落格！

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

一、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) 。

二、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就會隨即重新整理，也可以手動靜止更新，具體的細節是在某個生命週期中進行，具體的可以看看我的這篇文章

三、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發生了變化，但元件卻沒有更新的問題。當然還是有解決的方法的，所以建議還是少用。

四、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…

相關文章