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

vpoz6325 7年前發布 | 16K 次閱讀 React 前端技術

當我們談起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

Component 包含內部state，而 Stateless Functional Component 所有數據都來自props，沒有內部state;
Component 包含的一些生命周期函數， Stateless Functional Component 都沒有，因為 Stateless Functional component 沒有 shouldComponentUpdate ,所以也無法控制組件的渲染，也即是說只要是收到新的props， Stateless Functional Component 就會重新渲染。
Stateless Functional Component 不支持Refs

選哪個？

這里僅列出一些參考:

createClass，除非你確實對ES6的語法一竅不通，不然的話就不要再使用這種方式定義組件。
Stateless Functional Component, 對于不需要內部狀態，且用不到生命周期函數的組件，我們可以使用這種方式定義組件，比如展示性的列表組件，可以將列表項定義為Stateless Functional Component。
PureComponent/Component，對于擁有內部state，使用生命周期的函數的組件，我們可以使用二者之一，但是大部分情況下，我更推薦使用 PureComponent ，因為它提供了更好的性能，同時強制你使用不可變的對象，保持良好的編程習慣。

來自：https://segmentfault.com/a/1190000008402834

本文由用戶 vpoz6325 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1487580139201.html

React 前端技術