自定義元件(生命週期)
createClass 是建立自定義元件的入口方法,負責管理生命週期中的 getDefaultProps。該方 法在整個生命週期中只執行一次,這樣所有例項初始化的 props 將會被共享。 通過 createClass 建立自定義元件,利用原型繼承 ReactClassComponent 父類,按順序合併 mixin,設定初始化 defaultProps,返回建構函式。 當使用 ES6 classes 編寫 React 元件時,class MyComponent extends React.Component 其實就 是呼叫內部方法 createClass 建立元件
/**
* 建立自定義元件
*/
function createClass(spec) {
//建立自定義元件
var Constructor = identity(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;
//ReactClass沒有構造器,通過getInitialState和componentWillMount來代替
var initialState = this.getInitialState ? this.getInitialState() : null;
this.state = initialState;
});
//原型鏈繼承父類
Constructor.prototype = new ReactClassComponent();
Constructor.prototype.constructor = Constructor;
Constructor.prototype.__reactAutoBindPairs = [];
//合併mixin
injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));
mixSpecIntoComponent(Constructor, IsMountedMixin);
mixSpecIntoComponent(Constructor, spec);
// 所有的mixin合併後初始化defaultProps(在整個生命週期中,getDefaultProps只執行一次)
if (Constructor.getDefaultProps) {
Constructor.defaultProps = Constructor.getDefaultProps();
}
// 減少查詢並設定原型的時間
for (var methodName in ReactClassInterface) {
if (!Constructor.prototype[methodName]) {
Constructor.prototype[methodName] = null;
}
}
return Constructor;
}
複製程式碼
生命週期-掛載階段(MOUNTING)
- mountComponent 負責管理生命週期中的 getInitialState、componentWillMount、render 和 componentDidMount。
- 由於 getDefaultProps 是通過建構函式進行管理的,所以也是整個生命週期中最先開始執行的。而 mountComponent 只能望洋興嘆,無法呼叫到 getDefaultProps。這就解釋了為何 getDefaultProps只執行一次。
- 由於通過 ReactCompositeComponentBase 返回的是一個虛擬節點,所以需要利用 instantiateReactComponent去得到例項,再使用 mountComponent 拿到結果作為當前自定義元素的結果。
- 通過 mountComponent 掛載元件,初始化序號、標記等引數,判斷是否為無狀態元件,並進行對應的元件初始化工作,比如初始化 props、context 等引數。利用 getInitialState 獲取初始化state、初始化更新佇列和更新狀態。
- 若存在 componentWillMount,則執行。如果此時在 componentWillMount 中呼叫 setState 方法, 是不會觸發 re-render的,而是會進行 state 合併,且 inst.state = this._processPendingState(inst.props, inst.context) 是在 componentWillMount 之後執行的, 因此 componentWillMount 中的 this.state 並不是最新的,在 render 中才可以獲取更新後的 this.state。因此,React 是利用更新佇列 this._pendingStateQueue 以及更新狀態 this._pendingReplaceState 和 this._pendingForceUpdate 來實現 setState 的非同步更新機制。
- 當渲染完成後,若存在 componentDidMount,則呼叫。這就解釋了 componentWillMount 、render 、componentDidMount 這三者之間的執行順序。
- mountComponent 本質上是通過遞迴渲染內容的,由於遞迴的特性,父元件的componentWillMount 在其子元件的 componentWillMount 之前呼叫,而父元件的 componentDidMount在其子元件的 componentDidMount 之後呼叫。
/**
* 初始化元件,渲染標記,註冊事件監聽器
*/
mountComponent: function(transaction,hostParent, hostContainerInfo, context, ) {
//當前元素對應的上下文
this._context = context;
this._mountOrder = nextMountID++;
this._hostParent = hostParent;
this._hostContainerInfo = hostContainerInfo;
var publicProps = this._currentElement.props;
var publicContext = this._processContext(context);
var Component = this._currentElement.type;
var updateQueue = transaction.getUpdateQueue();
var doConstruct = shouldConstruct(Component);
//初始化公共類
var inst = this._constructComponent(doConstruct, publicProps, publicContext,updateQueue,);
var renderedElement;
// 用於判斷元件是否為stateless,無狀態元件沒有狀態更新佇列,只專注渲染
if (!doConstruct && (inst == null || inst.render == null)) {
renderedElement = inst;
warnIfInvalidElement(Component, renderedElement);
inst = new StatelessComponent(Component);
this._compositeType = CompositeTypes.StatelessFunctional;
} else {
if (isPureComponent(Component)) {
this._compositeType = CompositeTypes.PureClass;
} else {
this._compositeType = CompositeTypes.ImpureClass;
}
}
// 這些初始化引數本應該在構造器中設定,在此設定是為了便於進行簡單的類抽象
inst.props = publicProps;
inst.context = publicContext;
inst.refs = emptyObject;
inst.updater = updateQueue;
this._instance = inst;
// 將例項儲存為一個引用
ReactInstanceMap.set(inst, this);
//初始化state
var initialState = inst.state;
if (initialState === undefined) {
inst.state = initialState = null;
}
//初始化更新佇列
this._pendingStateQueue = null;
this._pendingReplaceState = false;
this._pendingForceUpdate = false;
var markup;
//如果掛載時發生錯誤
if (inst.unstable_handleError) {
markup = this.performInitialMountWithErrorHandling(renderedElement,hostParent, hostContainerInfo,transaction,context,);
} else {
//執行初始化掛載
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction,context,);
}
//如果存在componentDidMount,則呼叫
if (inst.componentDidMount) {
transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
}
return markup;
},
performInitialMountWithErrorHandling: function( renderedElement, hostParent, hostContainerInfo, transaction, context, ) {
var markup;
var checkpoint = transaction.checkpoint();
try {
//捕捉錯誤,如果沒有錯誤,則初始化掛載
markup = this.performInitialMount( renderedElement, hostParent, hostContainerInfo, transaction, context, );
} catch (e) {
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, hostParent, hostContainerInfo, transaction, context, );
}
return markup;
},
performInitialMount: function( renderedElement, hostParent, hostContainerInfo, transaction, context, ) {
var inst = this._instance;
var debugID = 0;
//如果存在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();
}
var nodeType = ReactNodeTypes.getType(renderedElement);
this._renderedNodeType = nodeType;
// 得到 _currentElement 對應的 component 類例項
var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY );
this._renderedComponent = child;
//render遞迴渲染
var markup = ReactReconciler.mountComponent( child, transaction, hostParent, hostContainerInfo,
this._processChildContext(context), debugID,);
return markup;
},
複製程式碼
生命週期-修改階段(RECEIVE_PROPS)
- updateComponent 負責管理生命週期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render和 componentDidUpdate。
- 首先通過 updateComponent 更新元件,如果前後元素不一致,說明需要進行元件更新。
- 若存在 componentWillReceiveProps,則執行。如果此時在 componentWillReceiveProps 中呼叫 setState,是不會觸發 re-render 的,而是會進行 state 合併。 且在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中也還是無法獲取到更新後的 this.state, 即此時訪問的 this.state 仍然是未更新的資料,需要設定 inst.state = nextState 後才可以,因此只有在 render 和 componentDidUpdate 中才能獲取到更新後的 this.state。
- 呼叫 shouldComponentUpdate 判斷是否需要進行元件更新,如果存在 componentWillUpdate,則執行。updateComponent 本質上也是通過遞迴渲染內容的,由於遞迴的特性,父元件的 componentWillUpdate 是在其子元件的 componentWillUpdate 之前呼叫的,而父元件的 componentDidUpdate也是在其子元件的 componentDidUpdate 之後呼叫的。
- 當渲染完成之後,若存在 componentDidUpdate,則觸發,這就解釋了 componentWillReceiveProps、componentWillUpdate、render、componentDidUpdate 它們之間的執行順序。
// receiveComponent 是通過呼叫 updateComponent 進行元件更新的
receiveComponent: function(nextElement, transaction, nextContext) {
var prevElement = this._currentElement;
var prevContext = this._context;
this._pendingElement = null;
this.updateComponent(transaction,prevElement,nextElement,prevContext,nextContext,);
},
updateComponent: function(transaction,prevParentElement,nextParentElement,prevUnmaskedContext,nextUnmaskedContext,) {
var inst = this._instance;
var willReceive = false;
var nextContext;
// 上下文是否改變
if (this._context === nextUnmaskedContext) {
nextContext = inst.context;
} else {
nextContext = this._processContext(nextUnmaskedContext);
willReceive = true;
}
var prevProps = prevParentElement.props;
var nextProps = nextParentElement.props;
// 新舊屬性不同
if (prevParentElement !== nextParentElement) {
willReceive = true;
}
//新舊屬性不同,並且存在componentWillReceiveProps,就執行componentWillReceiveProps()
if (willReceive && inst.componentWillReceiveProps) {
inst.componentWillReceiveProps(nextProps, nextContext);
}
//將新的state合併到更新佇列中,此時的nextState是最新的state
var nextState = this._processPendingState(nextProps, nextContext);
var shouldUpdate = true;
//根據更新佇列和shouldComponentUpdate的狀態來判斷是否需要更新元件
if (!this._pendingForceUpdate) {
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps,nextState,nextContext,);
} else {
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate =!shallowEqual(prevProps, nextProps) ||!shallowEqual(inst.state, nextState);
}
}
}
this._updateBatchNumber = null;
if (shouldUpdate) {
//重置更新佇列
this._pendingForceUpdate = false;
//即將更新this.props,this.state,和this.context
this._performComponentUpdate(nextParentElement,nextProps, nextState,nextContext,transaction,nextUnmaskedContext,);
} else {
// 如果確定元件不更新,仍然要這是props和state
this._currentElement = nextParentElement;
this._context = nextUnmaskedContext;
inst.props = nextProps;
inst.state = nextState;
inst.context = nextContext;
}
},
//在componentShouldUpdate()方法執行前呼叫了:就是說在呼叫之前將所有state操作合併
_processPendingState: function(props, context) {
var inst = this._instance;
var queue = this._pendingStateQueue;
var replace = this._pendingReplaceState;
this._pendingReplaceState = false;
this._pendingStateQueue = null;
//如果佇列為null,返回原state
if (!queue) {
return inst.state;
}
//如果佇列中有一個更新就返回這個更新值
if (replace && queue.length === 1) {
return queue[0];
}
//如果佇列中有多個更新,就將他們合併
var nextState = Object.assign({}, replace ? queue[0] : inst.state);
for (var i = replace ? 1 : 0; i < queue.length; i++) {
var partial = queue[i];
Object.assign(
nextState,
typeof partial === 'function'
? partial.call(inst, nextState, props, context)
: partial,
);
}
return nextState;
},
/**
* 當元件需要更新時,呼叫
*/
_performComponentUpdate: function(nextElement,nextProps,nextState,nextContext,transaction,unmaskedContext) {
var inst = this._instance;
var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);
var prevProps;
var prevState;
var prevContext;
//如果存在componentDidUpdate,則將當前的props,state和context儲存一份
if (hasComponentDidUpdate) {
prevProps = inst.props;
prevState = inst.state;
prevContext = inst.context;
}
//執行componentWillUpdate
if (inst.componentWillUpdate) {
inst.componentWillUpdate(nextProps, nextState, nextContext);
}
//更新this.props,this.state,this.context
this._currentElement = nextElement;
this._context = unmaskedContext;
inst.props = nextProps;
inst.state = nextState;
inst.context = nextContext;
//渲染元件
this._updateRenderedComponent(transaction, unmaskedContext);
//當元件完成更新後,如果存在ComponentDidUpdate,則呼叫
if (hasComponentDidUpdate) {
transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst,prevProps, prevState,prevContext,),inst,);
}
},
/**
* 呼叫render渲染元件
*/
_updateRenderedComponent: function(transaction, context) {
var prevComponentInstance = this._renderedComponent;
var prevRenderedElement = prevComponentInstance._currentElement;
var nextRenderedElement = this._renderValidatedComponent();
var debugID = 0;
//如果需要更新,則呼叫ReactReconciler.receiveComponent()繼續更新元件
if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
ReactReconciler.receiveComponent(prevComponentInstance,nextRenderedElement,transaction,this._processChildContext(context),);
} else {
//如果不需要更新,則渲染元件
var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);
ReactReconciler.unmountComponent(prevComponentInstance, false);
var nodeType = ReactNodeTypes.getType(nextRenderedElement);
this._renderedNodeType = nodeType;
//得到 nextRenderedElement 對應的 component 類例項
var child = this._instantiateReactComponent( nextRenderedElement,nodeType !== ReactNodeTypes.EMPTY );
this._renderedComponent = child;
//使用render遞迴渲染
var nextMarkup = ReactReconciler.mountComponent(child,transaction,this._hostParent,this._hostContainerInfo,this._processChildContext(context),debugID,);
this._replaceNodeWithMarkup(oldHostNode, nextMarkup,prevComponentInstance,);
}
},
複製程式碼
生命週期-解除安裝階段(UNMOUNTING)
- unmountComponent 負責管理生命週期中的 componentWillUnmount。
- 如果存在 componentWillUnmount,則執行並重置所有相關引數、更新佇列以及更新狀態,如果此時在 componentWillUnmount 中呼叫 setState,是不會觸發 re-render 的, 這是因為所有更新佇列和更新狀態都被重置為 null,並清除了公共類,完成了元件解除安裝操作
unmountComponent: function(safely) {
if (!this._renderedComponent) {
return;
}
var inst = this._instance;
//如果存在componentWillUnmount,則呼叫
if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {
inst._calledComponentWillUnmount = true;
if (safely) {
var name = this.getName() + '.componentWillUnmount()';
ReactErrorUtils.invokeGuardedCallback(
name,
inst.componentWillUnmount.bind(inst),
);
} else {
inst.componentWillUnmount();
}
}
//如果元件已經渲染,則對元件進行componentWillUnmount()
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 = 0;
this._topLevelWrapper = null;
//刪除這個例項
ReactInstanceMap.remove(inst);
},
複製程式碼
無狀態元件
- 無狀態元件只有一個render方法,並沒有元件類的例項化過程,也沒有例項返回
- 無狀態元件沒有狀態,沒有生命週期,就是接受props渲染生成dom結構是一個純粹為渲染而生的元件,
//無狀態元件只有一個render方法
function StatelessComponent(Component) {}
StatelessComponent.prototype.render = function() {
var Component = ReactInstanceMap.get(this)._currentElement.type;
//沒有state狀態
var element = Component(this.props, this.context, this.updater);
return element;
};
複製程式碼