精益 React 學習指南 （Lean React）- 1.4 React 組件生命週期和方法

書籍完整目錄

1.4 React 組件生命週期

官方文檔

1.4.1 組件

React 中組件有本身的生命週期方法，簡單理解能夠爲組件從 出生（實例化） -> 激活 -> 銷燬 生命週期 hook。經過這些 hook 方法能夠自定義組件的特性。 除此以外，還能夠設置一些額外的規格配置。

這些生命週期方法均可以在調用 React.createClass 的參數對象中傳入， 咱們已經使用過了一些方法：

• render

• getInitialState

• getDefaultProps

• propTypes

1.4.2 mixins

類型： array mixins

mixins 能夠理解爲 React 的插件列表，經過這種模式在不一樣組件之間共享方法數據或者行爲只需共享 mixin 就行，mixins 內定義的生命週期方法在組件的生命週期內都會被調用。

可能的一些疑問：

• Q1. 若是組件已經定義了某個生命週期方法， mixin 內也定義了該方法，那麼 mixin 內會被調用仍是 組件的會被調用？

• Q2. 多個插件都定義了相同生命週期的方法呢？

• Q3. 那若是多個插件定義了 getInitialState 這種配置方法呢，有何影響？

插件模式並不是繼承的模式，對於問題 一、2 的答案是同樣的，都會被調用，調用順序爲 mixins 數組中的順序。

• A1: 都會被調用

• A2: 都會被調用

• A3: React 會對返回結果作智能的合併，全部插件的 getInitialState 都會生效，前提條件是它們返回的字段不衝突，若是發生字段衝突，React 會提示報錯。 同理若是是非 組件的規格方法，出於共享目的的一些方法在多個 mixin 中也不能衝突。

eg：

var MyMixin1 = {
    componentDidMount: function() {
        console.log('auto do something when component did mount');
    }
};

var MyMixin2 = {
    someMethod: function() {
        console.log('doSomething');
    }
};

var MyComponnet = React.createClass({
    mixins: [MyMixin1, MyMixin2],
    componentDidMount: function() {
        // 調用 mixin1 共享的方法
        this.someMethod();
    }
});

更多 mixins 的使用會在第三章中講解。

1.4.3 statics

類型： object statics

statics 能夠定義組件的類方法

eg:

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  }
});

MyComponent.customMethod('bar');  // true

React 的組件是 OOP 的思惟，MyComponent 是一個 class，class 分爲類方法和實例方法，實例方法能夠訪問 this, 然而類方法不能，因此咱們不能在 Class 中返回狀態或者屬性。

1.4.4 displayName

類型： string displayName

爲了顯示調試信息，每一個組件都會有一個名稱，JSX 在轉爲 JS 的時候自動的設置 displayName, 以下：

// Input (JSX):
var MyComponent = React.createClass({ });

// Output (JS):
var MyComponent = React.createClass({displayName: "MyComponent", });

固然咱們也能夠自定義 displayName

1.4.5 生命週期方法

下圖描述了整個組件的生命週期，包含的主要幾種狀況：

1. 組件被實例化的時候

2. 組件屬性改變的時候

3. 組件狀態被改變的時候

4. 組件被銷燬的時候

1.4.6 componentWillMount

void componentWillMount()

條件：第一次渲染階段在調用 render 方法前會被調用
做用：該方法在整個組件生命週期只會被調用一次，因此能夠利用該方法作一些組件內部的初始化工做

1.4.7 componentDidMount

void componentDidMount()

條件：第一次渲染成功事後，組件對應的 DOM 已經添加到頁面後調用
做用：這個階段表示組件對應的 DOM 已經存在，咱們能夠在這個時候作一些依賴 DOM 的操做或者其餘的一些如請求數據，和第三方庫整合的操做。若是嵌套了子組件，子組件會比父組件優先渲染，因此這個時候能夠獲取子組件對應的 DOM。

1.4.8 componentWillReceiveProps(newProps)

void componentWillReceiveProps(
  object nextProps
)

條件： 當組件獲取新屬性的時候，第一次渲染不會調用
用處： 這個時候能夠根據新的屬性來修改組件狀態
eg:

componentWillReceiveProps: function(nextProps) {
      this.setState({
        likesIncreasing: nextProps.likeCount > this.props.likeCount
      });
    }

注意： 這個時候雖然說是獲取新屬性，但並不能肯定屬性必定改變了，例如一個組件被屢次渲染到 DOM 中，以下面：

var Component = React.createClass({
        componentWillReceiveProps: function(nextProps) {
            console.log('componentWillReceiveProps', nextProps.data.bar);
        },
        rener: function() {
            return <div> {this.props.data.bar} </div>
        }
    });

    var container = document.getElementById('container');
    var mydata = {bar: 'drinks'};
    ReactDOM.render(<Component data={mydata} />, container);
    ReactDOM.render(<Component data={mydata} />, container);
    ReactDOM.render(<Component data={mydata} />, container);

結果會輸出兩次 componentWillReceiveProps，雖然屬性數據沒有改變，可是仍然會調用 componentWillReceiveProps 方法。

參考 Facebook (A=>B) => (B => A)

1.4.9 shouldComponentUpdate(nextProps, nextState)

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

條件： 接收到新屬性或者新狀態的時候在 render 前會被調用（除了調用 forceUpdate 和初始化渲染之外）
用處： 該方法讓咱們有機會決定是否重渲染組件，若是返回 false，那麼不會重渲染組件，藉此能夠優化應用性能（在組件不少的狀況）。

1.4.10 componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

條件：當組件肯定要更新，在 render 以前調用
用處：這個時候能夠肯定必定會更新組件，能夠執行更新前的操做
注意：方法中不能使用 setState ，setState 的操做應該在 componentWillReceiveProps 方法中調用

1.4.11 componentDidUpdate

void componentDidUpdate(
  object prevProps, object prevState
)

條件：更新被應用到 DOM 以後
用處：能夠執行組件更新事後的操做

1.4.12 生命週期與單向數據流

咱們知道 React 的核心模式是單向數據流，這不單單是對於組件級別的模式，在組件內部 的生命週期中也是應該符合單向數據的模式。數據從組件的屬性流入，再結合組件的狀態，流入生命週期方法，直到渲染結束這都應該是一個單向的過程，其間不能隨意改變組件的狀態。

1.4.13 實例練習：經過 mixin 打印出組件生命週期的執行順序

@todo