组件的生命周期分为二个部分
- 组件的挂载
- 组件的更新
组件的挂载
在上一章对于组件的挂载已经做了详细的说明，但是涉及到组件生命周期部分被略过.接下来我将详细的对其说明. 组件的挂载涉及到二个比较重要的生命周期方法componentWillMount和componentDidMount.
componentWillMount
对于componentWillMount这个函数玩过React的都知道他是组件render之前的触发. 但是如果我再具体点呢. 是在实例之前？还是实例之后？还是构建成真实dom之前？还是构建成真实dom之前，渲染之前?估计很多人不知道吧.所以在面试的时候无论你对React有多熟，还是尽量不要说"精通"二字.(大佬除外)
componentWillMount是组件更新之前触发，所以直接从ReactCompositeComponent.mountComponent里面找
// this.performInitialMount
if (inst.componentWillMount) {
debugger
if ("development" !== "production") {
measureLifeCyclePerf(
function() {
return inst.componentWillMount();
},
debugID,
"componentWillMount"
);
} else {
inst.componentWillMount();
}
// When mounting, calls to `setState` by `componentWillMount` will set
// `this._pendingStateQueue` without triggering a re-render.
if (this._pendingStateQueue) {
inst.state = this._processPendingState(
inst.props,
inst.context
);
}
}
复制代码代码在performInitialMount函数里面，所以在实例之后，虚拟dom构建真实dom之前触发的
componentDidMount
直接看代码吧
var markup;
if (inst.unstable_handleError) {
markup = this.performInitialMountWithErrorHandling(
renderedElement,
hostParent,
hostContainerInfo,
transaction,
context
);
} else {
markup = this.performInitialMount(
renderedElement,
hostParent,
hostContainerInfo,
transaction,
context
);
}
if (inst.componentDidMount) {
if ("development" !== "production") {
transaction
.getReactMountReady()
.enqueue(function() {
measureLifeCyclePerf(
function() {
return inst.componentDidMount();
},
_this._debugID,
"componentDidMount"
);
});
} else {
transaction
.getReactMountReady()
.enqueue(
inst.componentDidMount,
inst
);
}
}
复制代码它是出现在markup(真实dom)之后.但是肯定不会在这里面执行，因为在markup还没插入到container里面呢。回顾一下上一章的内容MountComponentIntoNode方法mountComponent之后还有个setInnerHTML(container, markup)只有这个函数执行完之后componentDidMount才能执行.
注意performInitialMount方法 看看下面的代码
class A extends React.Component {
render(){
return <K />
}
}
<App>
<A />
</App>
复制代码this.componentDidMount的执行顺序是K-->A--->App. 因为APP执行到 this.performInitialMount就开始深度遍历了.然后执行A，A又遍历执行K. K执行完才向上执行. 了解了他们的执行顺序我们看看
transaction
.getReactMountReady()
.enqueue(function() {
measureLifeCyclePerf(
function() {
return inst.componentDidMount();
},
_this._debugID,
"componentDidMount"
);
});
复制代码再看看这个transaction是在哪里生成的
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
/* useCreateElement */
!shouldReuseMarkup &&
ReactDOMFeatureFlags.useCreateElement
);
transaction.perform(
mountComponentIntoNode,
null,
componentInstance,
container,
transaction,
shouldReuseMarkup,
context
);
复制代码transaction是React里面一个非常核心的功能. 出现在很多个地方，不搞清楚transtion源代码是没办法读下去的.
事务和队列
看看官方给出的流程图
* <pre>
* wrappers (injected at creation time)
* + +
* | |
* +-----------------|--------|--------------+
* | v | |
* | +---------------+ | |
* | +--| wrapper1 |---|----+ |
* | | +---------------+ v | |
* | | +-------------+ | |
* | | +----| wrapper2 |--------+ |
* | | | +-------------+ | | |
* | | | | | |
* | v v v v | wrapper
* | +---+ +---+ +---------+ +---+ +---+ | invariants
* perform(anyMethod) | | | | | | | | | | | | maintained
* +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
* | | | | | | | | | | | |
* | | | | | | | | | | | |
* | | | | | | | | | | | |
* | +---+ +---+ +---------+ +---+ +---+ |
* | initialize close |
* +-----------------------------------------+
* </pre>
var TransactionImpl = {
reinitializeTransaction: function () {
this.transactionWrappers = this.getTransactionWrappers();
if (this.wrapperInitData) {
this.wrapperInitData.length = 0;
} else {
this.wrapperInitData = [];
}
this._isInTransaction = false;
},
_isInTransaction: false,
getTransactionWrappers: null,
isInTransaction: function () {
return !!this._isInTransaction;
},
perform: function (method, scope, a, b, c, d, e, f) {
!!this.isInTransaction() ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Transaction.perform(...): Cannot initialize a transaction when there is already an outstanding transaction.') : _prodInvariant('27') : void 0;
var errorThrown;
var ret;
try {
this._isInTransaction = true;
errorThrown = true;
this.initializeAll(0);
ret = method.call(scope, a, b, c, d, e, f);
errorThrown = false;
} finally {
try {
if (errorThrown) {
try {
this.closeAll(0);
} catch (err) {}
} else {
this.closeAll(0);
}
} finally {
this._isInTransaction = false;
}
}
return ret;
},
initializeAll: function (startIndex) {
var transactionWrappers = this.transactionWrappers;
for (var i = startIndex; i < transactionWrappers.length; i++) {
var wrapper = transactionWrappers[i];
try {
this.wrapperInitData[i] = OBSERVED_ERROR;
this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this) : null;
} finally {
if (this.wrapperInitData[i] === OBSERVED_ERROR) {
try {
this.initializeAll(i + 1);
} catch (err) {}
}
}
}
},
closeAll: function (startIndex) {
!this.isInTransaction() ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Transaction.closeAll(): Cannot close transaction when none are open.') : _prodInvariant('28') : void 0;
var transactionWrappers = this.transactionWrappers;
for (var i = startIndex; i < transactionWrappers.length; i++) {
var wrapper = transactionWrappers[i];
var initData = this.wrapperInitData[i];
var errorThrown;
try {
errorThrown = true;
if (initData !== OBSERVED_ERROR && wrapper.close) {
wrapper.close.call(this, initData);
}
errorThrown = false;
} finally {
if (errorThrown) {
try {
this.closeAll(i + 1);
} catch (e) {}
}
}
}
this.wrapperInitData.length = 0;
}
};
module.exports = TransactionImpl;
复制代码Transaction的主要作用就是包装一个函数，函数的执行交给Transaction，同时Transaction会在函数执行前后执行被注入的Wrappers，一个Wrapper有二个方法initialize和close。Wrapper是通过getTransactionWrappers方法注入的
代码很简单，很容易看明白我就具体说明下每个函数和关键属性的作用
perform执行注入的函数fn和wrappers，执行顺序为initializeAll-->fn-->closeAllinitializeAll执行所有Wrapper的initialize方法closeAll执行所有Wrapper的close方法reinitializeTransaction初始化isInTransaction判断事务是否在执行
了解了Transaction我们再来仔细分析下上面的代码
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
/* useCreateElement */
!shouldReuseMarkup &&
ReactDOMFeatureFlags.useCreateElement
);
复制代码ReactReconcileTransaction对transition做了一成包装
ReactReconcileTransaction
var TRANSACTION_WRAPPERS = [
SELECTION_RESTORATION,
EVENT_SUPPRESSION,
ON_DOM_READY_QUEUEING
];
if ("development" !== "production") {
TRANSACTION_WRAPPERS.push({
initialize:
ReactInstrumentation.debugTool.onBeginFlush,
close: ReactInstrumentation.debugTool.onEndFlush
});
}
/**
* Currently:
* - The order that these are listed in the transaction is critical:
* - Suppresses events.
* - Restores selection range.
*
* Future:
* - Restore document/overflow scroll positions that were unintentionally
* modified via DOM insertions above the top viewport boundary.
* - Implement/integrate with customized constraint based layout system and keep
* track of which dimensions must be remeasured.
*
* @class ReactReconcileTransaction
*/
function ReactReconcileTransaction(useCreateElement) {
this.reinitializeTransaction();
this.renderToStaticMarkup = false;
this.reactMountReady = CallbackQueue.getPooled(
null
);
this.useCreateElement = useCreateElement;
}
var Mixin = {
/**
* @see Transaction
* @abstract
* @final
* @return {array<object>} List of operation wrap procedures.
* TODO: convert to array<TransactionWrapper>
*/
getTransactionWrappers: function() {
return TRANSACTION_WRAPPERS;
},
/**
* @return {object} The queue to collect `onDOMReady` callbacks with.
*/
getReactMountReady: function() {
return this.reactMountReady;
},
/**
* @return {object} The queue to collect React async events.
*/
getUpdateQueue: function() {
return ReactUpdateQueue;
},
/**
* Save current transaction state -- if the return value from this method is
* passed to `rollback`, the transaction will be reset to that state.
*/
checkpoint: function() {
// reactMountReady is the our only stateful wrapper
return this.reactMountReady.checkpoint();
},
rollback: function(checkpoint) {
this.reactMountReady.rollback(checkpoint);
},
/**
* `PooledClass` looks for this, and will invoke this before allowing this
* instance to be reused.
*/
destructor: function() {
CallbackQueue.release(this.reactMountReady);
this.reactMountReady = null;
}
};
复制代码getTransactionWrappers方法里面返回的是TRANSACTION_WRAPPERS他的值有4个也就是说注入了四个Wrapper。具体看看ON_DOM_READY_QUEUEING这个Wraper;
var ON_DOM_READY_QUEUEING = {
/**
* Initializes the internal `onDOMReady` queue.
*/
initialize: function() {
this.reactMountReady.reset();
},
/**
* After DOM is flushed, invoke all registered `onDOMReady` callbacks.
*/
close: function() {
this.reactMountReady.notifyAll();
}
};
复制代码this.reactMountReady是一个队列, 在组件构建真实dom之后
transaction
.getReactMountReady()
.enqueue(function() {
measureLifeCyclePerf(
function() {
return inst.componentDidMount();
},
_this._debugID,
"componentDidMount"
);
});
复制代码会将componentDidMount方法push进入队列里面. 而mountComponentIntoNode(插入到了document中了)执行完毕之后会执行ON_DOM_READY_QUEUEING.close方法也就是this.reactMountReady.notifyAll()方法,释放队列中所有的元素。
componentDidMount是通过一个队列来维护的，因为队列是先进先出的.而最里层的组件是最新执行！
组件的更新this.setState
缓缓，明天更新！