1. 初步瞭解React生命週期
React生命週期可以分為掛載、更新、解除安裝三個階段。主要可以分為兩類：
- 元件掛載和解除安裝；
- 元件接收新的資料和狀態時的更新；
1.1 元件的掛載
元件的掛載是最基本過程，這個過程主要做初始化。在這初始化個過程中componentWillMount會在render方法之前執行，而componentDidMount方法會在render方法之後執行。分別代表了渲染前後時刻。寫一個簡單的例子：
class Demo extends React.Component {
static propTypes = {}
static defaultProps = {}
constructor(props) {
super(props)
this.state = {}
}
componentWillMount() {}
render() {return null}
componentDidMount() {}
}
複製程式碼如上，這個初始化過程沒有什麼特別之處，這裡包括讀取初始state、讀取初始props、以及兩個生命週期方法componentWillMount和componentDidMount。這些都只會在元件初始化時執行一次。
1.2 元件的解除安裝
元件的解除安裝只有componentWillUnmount這個一個方法。
1.3 元件的更新
元件的更新發生在父元件傳遞props或者自身執行setState改變狀態這一系列操作的情況下。和元件更新的生命週期方法有以下幾個：
class Demo extends React.Component {
//當元件更新時會順序執行以下方法
componentWillReceiveProps(nextProps){} //
shouldComponentUpdate(nextProps, nextState) {} //返回false則停止向下執行，預設返回true
componentWillUpdate(nextProps, nextState) {}
render() {}
componentDidUpdate(prevProps, prevState) {}
}
複製程式碼tip: shouldComponentUpdate可以用來正確的渲染元件的。理想情況下，父級節點改變時，只會重新渲染一條鏈路上和該props相關的元件。但是預設情況下，React會渲染所有的節點，因為shouldComponentUpdate預設返回true。
2. 深入瞭解React生命週期
前面大致介紹了元件的生命週期主要分為三種狀態：掛載、更新、解除安裝。如下圖可以詳細瞭解不同狀態的執行順序：
使用ES6 classes構建元件的時候static defaultProps={}其實就是呼叫內部的getDefaultProps方法。constructor中的this.state={}其實就是呼叫內部的getInitialState方法。
2.1 詳解React生命週期
自定義元件生命週期通過3個階段進行控制：MOUNTING,RECEIVE_PROPS，UNMOUNTING,它負責通知元件當時所處的階段，應該執行生命週期中的哪個步驟。這三個階段分別對應三個方法：
2.2使用createClass建立自定義元件
createClass是建立自定義元件的入口方法，負責管理生命週期中的getDefaultProps方法。該方法在整個生命週期中只執行一次，這樣所有例項初始化的props都能共享。 通過createClass建立自定義元件，利用原型繼承ReactClassComponent父類，按順序合併mixin，設定初始化defaultProps，返回建構函式。
var ReactClass = {
createClass: function(spec) {
var Constructor = function(props, context, updater) {
// 自動繫結
if (this.__reactAutoBindPairs.length) {
bindAutoBindMethods(this);
}
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
this.state = null;
//ReactClasses沒有建構函式，通過getInitialState和componentWillMount來代替
var initialState = this.getInitialState ? this.getInitialState() : null;
this.state = initialState;
};
//原型繼承ReactClassComponent父類
Constructor.prototype = new ReactClassComponent();
Constructor.prototype.constructor = Constructor;
Constructor.prototype.__reactAutoBindPairs = [];
//合併mixin
injectedMixins.forEach(
mixSpecIntoComponent.bind(null, Constructor)
);
mixSpecIntoComponent(Constructor, spec);
//所有mixin合併後初始化defaultProps（在生個生命週期中，defaultProps只執行一次）
if (Constructor.getDefaultProps) {
Constructor.defaultProps = Constructor.getDefaultProps();
}
//設定原型
for (var methodName in ReactClassInterface) {
if (!Constructor.prototype[methodName]) {
Constructor.prototype[methodName] = null;
}
}
//最後返回的是建構函式
return Constructor;
},
}
複製程式碼2.3 階段一：MOUNTING
mountComponent負責管理生命週期中的getInitialState,componentWillMount,render和componentDidMount。 由於getDefaultProps是在初始化建構函式中進行管理的，所以也是整個生命週期中最先執行的。而且只執行一次也可以理解了。
由於通過ReactCompositeComponentBase返回的是一個虛擬節點，所以需要通過** instantiate-ReactComponent去得到例項，在通過mountComponent**拿到結果作為當前自定義元素的結果。
通過mountComponent掛載元件，初始化序號，標記引數等，判斷是否為無狀態元件，並進行對應的初始化操作，比如初始化props，context等引數。利用getInitialState獲取初始化state, 初始化更新佇列和更新狀態。
如果存在componentWillMount則執行，如果此時在componetWillMount呼叫setState方法，是不會觸發re-render方法，而是會進行state合併，且inst.state = this._processPendingState(inst.props, inst.context)在componentWillMount之後執行。因此在render中才可以獲取到最新的state。
因此,React是通過更新佇列this._pendingStateQueue以及更新狀態this._pendingReeplaceState和this._pendingForUpdate來實現setState的非同步更新。
當渲染完成後，若存在componentDidMount則呼叫。
其實mountComponent是通過遞迴渲染內容。由於遞迴的特性，父元件的componentWillMount在其子元件的componentWillMount之前呼叫,父元件的componentDidMount在其子元件的componentDidMount之後呼叫。
//react/src/renderers/shared/reconciler/ReactCompositeComponent.js
//當元件掛載時，會分配一個遞增編號，表示執行ReactUpdates時更新元件的順序
var nextMountID = 1
var ReactCompositeComponentMixin = {
//初始化元件，渲染標記，註冊事件監聽器
mountComponent: function (transaction, nativeParent, nativeContainerInfo, context) {
this._context = context; //當前元件對應的上下文
this._mountOrder = nextMountID++;
this._nativeParent = nativeParent;
this._nativeContainerInfo = nativeContainerInfo;
var publicProps = this._processProps(this._currentElement.props);
var publicContext = this._processContext(context);
var Component = this._currentElement.type;
// 初始化公共類
var inst;
var renderedElement;
//這裡判斷是否是無狀態元件，無狀態元件沒有更新狀態序列，只關注更新
if (Component.prototype && Component.prototype.isReactComponent) {
inst = new Component(publicProps, publicContext, ReactUpdateQueue);
} else {
inst = Component(publicProps, publicContext, ReactUpdateQueue);
if (inst == null || inst.render == null) {
renderedElement = inst;
warnIfInvalidElement(Component, renderedElement);
invariant(
inst === null ||
inst === false ||
ReactElement.isValidElement(inst),
'%s(...): A valid React element (or null) must be returned. You may have ' +
'returned undefined, an array or some other invalid object.',
Component.displayName || Component.name || 'Component'
);
inst = new StatelessComponent(Component);
}
}
// These should be set up in the constructor, but as a convenience for
// simpler class abstractions, we set them up after the fact.
//這些初始化引數應該在建構函式中設定，再此處設定為了便於簡單的類抽象
inst.props = publicProps;
inst.context = publicContext;
inst.refs = emptyObject;
inst.updater = ReactUpdateQueue;
this._instance = inst;
// 將例項儲存為一個引用
ReactInstanceMap.set(inst, this);
//初始化state
var initialState = inst.state;
if (initialState === undefined) {
inst.state = initialState = null;
}
//初始化state更新佇列
this._pendingStateQueue = null;
this._pendingReplaceState = false;
this._pendingForceUpdate = false;
var markup;
//如果掛載錯誤則執行performInitialMountWithErrorHandling(方法如下)
if (inst.unstable_handleError) {
markup = this.performInitialMountWithErrorHandling(
renderedElement,
nativeParent,
nativeContainerInfo,
transaction,
context
);
} else {
//執行掛載
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
}
//如果存在componentDidMount則呼叫
if (inst.componentDidMount) {
transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
}
return markup;
},
//掛載錯誤執行方法
performInitialMountWithErrorHandling: function (
renderedElement,
nativeParent,
nativeContainerInfo,
transaction,
context
) {
var markup;
var checkpoint = transaction.checkpoint();
try {
//如果沒有錯誤則初始化掛載
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
} catch (e) {
// Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint
transaction.rollback(checkpoint);
this._instance.unstable_handleError(e);
if (this._pendingStateQueue) {
this._instance.state = this._processPendingState(this._instance.props, this._instance.context);
}
checkpoint = transaction.checkpoint();
//如果捕捉到錯誤，則執行unmountComponent後再初始化掛載
this._renderedComponent.unmountComponent(true);
transaction.rollback(checkpoint);
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
}
return markup;
},
//初始化掛載方法
performInitialMount: function(renderedElement, nativeParent, nativeContainerInfo, transaction, context) {
var inst = this._instance;
//如果存在componentWillMount則呼叫
if (inst.componentWillMount) {
inst.componentWillMount();
//如果在componentWillMount觸發setState時，不會觸發re-render,而是自動提前合併
if (this._pendingStateQueue) {
inst.state = this._processPendingState(inst.props, inst.context);
}
}
// 如果不是無狀態元件則直接渲染
if (renderedElement === undefined) {
renderedElement = this._renderValidatedComponent();
}
this._renderedNodeType = ReactNodeTypes.getType(renderedElement);
//得到 _currentElement對應的component類例項
this._renderedComponent = this._instantiateReactComponent(
renderedElement
);
//遞迴渲染
var markup = ReactReconciler.mountComponent(
this._renderedComponent,
transaction,
nativeParent,
nativeContainerInfo,
this._processChildContext(context)
);
return markup;
}
}
複製程式碼2.4 階段二：REVEIVE_PROPS
updateComponent負責管理生命週期的componentWillReceiveProps、shouldComponent、componentWillUpdate、render、componentDidUpdate。
首先通過updateComponent更新元件，如果前後元素不一致，說明需要元件更新。
若存在componentWillReceiveProps，則執行。如果此時在componentWillReceiveProps中呼叫setState是不會觸發re-render，而是會進行state合併。且在componentWillReceiveProps，shouldComponentUpate和componentWillUpdate是無法獲取更新後的this.state。需要設定inst.state = nextState後才可以。因此只有在render和componentDidUpdate中才可以獲取更新後的state.
呼叫shouldComponentUpdate判斷是否需要進行元件更新，如果存在componentWillUpdate則執行。
updateComponet也是通過遞迴渲染的，由於遞迴的特性，父元件的componentWillUpdate在子元件之前執行，父元件的componentDidUpdate在其子元件之後執行。
2.5 階段三：UNMOUNTING
unmountComponent負責管理componentWillUnmount。在這個階段會清空一切。
//元件解除安裝
unmountComponent: function(safely) {
if (!this._renderedComponent) {
return;
}
var inst = this._instance;
//如果存在componentWillUnmount，則呼叫
if (inst.componentWillUnmount) {
if (safely) {
var name = this.getName() + '.componentWillUnmount()';
ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));
} else {
inst.componentWillUnmount();
}
}
//如果元件已經渲染，則對元件進行unmountComponent操作
if (this._renderedComponent) {
ReactReconciler.unmountComponent(this._renderedComponent, safely);
this._renderedNodeType = null;
this._renderedComponent = null;
this._instance = null;
}
//重置相關引數，更新佇列以及更新狀態
this._pendingStateQueue = null;
this._pendingReplaceState = false;
this._pendingForceUpdate = false;
this._pendingCallbacks = null;
this._pendingElement = null;
this._context = null;
this._rootNodeID = null;
this._topLevelWrapper = null;
//清除公共類
ReactInstanceMap.remove(inst);
},
複製程式碼React新特性來了
如圖，多了getDerivedStaetFromProps，getSnapShotBeforeUpdate。
1.static getDerivedStateFromProps(nextProps, prevState)
getDerivedStateFromProps會在呼叫render之前呼叫，並且在初始掛載以及後續更新時都會被呼叫。他應該返回一個物件來更新state。如果返回null則不更新任何內容。它接收兩個引數，一個是傳進來的nextProps和之前的prevState。
2. getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate在最近一次渲染輸出(提交至DOM節點)之前呼叫，它使得元件能在發生更改之前從DOM中捕獲一些資訊。此元件返回的任何值將作為componentDidUpdate的第三個引數。
3. static getDerivedStateFromError(error)
此生命週期會在後代元件丟擲錯誤後被呼叫。它將丟擲的錯誤作為引數，並返回一個值以更新 state。
4. componentDidCatch(error, info)
此生命週期在後代元件丟擲錯誤後被呼叫。 它接收兩個引數： error —— 丟擲的錯誤。 info —— 帶有 componentStack key 的物件，其中包含有關元件引發錯誤的棧資訊。