山东网站建设哪家专业,上海网站建设 知名觉,做app页面的网站,网站页面设计的重要性setState
setState() 将对组件 state 的更改排入队列批量推迟更新#xff0c;并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步#xff0c;只是代码执行顺序不同#xff0c;有了异步的感觉。 使用方法 setState(stateChange | u…setState
setState() 将对组件 state 的更改排入队列批量推迟更新并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步只是代码执行顺序不同有了异步的感觉。 使用方法 setState(stateChange | updater [, callback]) stateChange - 作为被传入的对象将被浅层合并到新的 state 中updater - (state, props) stateChange返回基于 state 和 props 构建的新对象将被浅层合并到新的 state 中callback - 为可选的回调函数 使用 setState() 改变状态之后立刻通过this.state拿不到最新的状态 可以使用 componentDidUpdate() 或者 setState(updater, callback) 中的回调函数 callback 保证在应用更新后触发通常建议使用 componentDidUpdate() 多次setState()函数调用产生的效果会合并 为了更好的感知性能React 会在同一周期内会对多个 setState() 进行批处理。通过触发一次组件的更新来引发回流。后调用的 setState() 将覆盖同一周期内先调用 setState() 的值。所以如果是下一个 state 依赖前一个 state 的话推荐给 setState() 传 function
onClick () {this.setState({ quantity: this.state.quantity 1 });this.setState({ quantity: this.state.quantity 1 });
}
// react中这个方法最终会变成
Object.assign(previousState,{quantity: state.quantity 1},{quantity: state.quantity 1},...
)同步 | 异步更新 同步更新 React 引发的事件处理比如通过onClick引发的事件处理React 生命周期函数 异步更新 绕过React通过 addEventListener 直接添加的事件处理函数通过 setTimeout || setInterval 产生的异步调用
setState()被调用之后源码执行栈 react 参照版本 15.6.0 1. setState() 源码路径 src/isomorphic/modern/class/ReactBaseClasses.js React组件继承自React.Component而setState是React.Component的方法因此对于组件来讲setState属于其原型方法
ReactComponent.prototype.setState function(partialState, callback) {this.updater.enqueueSetState(this, partialState);if (callback) {this.updater.enqueueCallback(this, callback, setState);}
}2. enqueueSetState(); enqueueCallback() 源码路径 src/renderers/shared/stack/reconciler/ReactUpdateQueue.js 这个文件导出了一个 ReactUpdateQueue 对象React更新队列
enqueueSetState: function(publicInstance, partialState) {var internalInstance getInternalInstanceReadyForUpdate(publicInstance,setState,);if (!internalInstance) {return;}var queue internalInstance._pendingStateQueue ||(internalInstance._pendingStateQueue []);queue.push(partialState);enqueueUpdate(internalInstance);
}
enqueueCallback: function(publicInstance, callback, callerName) {ReactUpdateQueue.validateCallback(callback, callerName);var internalInstance getInternalInstanceReadyForUpdate(publicInstance);if (!internalInstance) {return null;}if (internalInstance._pendingCallbacks) {internalInstance._pendingCallbacks.push(callback);} else {internalInstance._pendingCallbacks [callback];}enqueueUpdate(internalInstance);}3. enqueueUpdate() 源码路径 src/renderers/shared/stack/reconciler/ReactUpdates.js 如果处于批量更新模式也就是 isBatchingUpdates 为 true 时不进行state的更新操作而是将需要更新的 component 添加到 dirtyComponents 数组中。
如果不处于批量更新模式对所有队列中的更新执行 batchedUpdates 方法。
function enqueueUpdate(component) {ensureInjected();if (!batchingStrategy.isBatchingUpdates) {batchingStrategy.batchedUpdates(enqueueUpdate, component);return;}dirtyComponents.push(component);if (component._updateBatchNumber null) {component._updateBatchNumber updateBatchNumber 1;}
}4. batchedUpdates() 源码路径 src/renderers/shared/stack/reconciler/ReactDefaultBatchingStrategy.js 如果 isBatchingUpdates 为 true当前正处于更新事务状态中则将 Component 存入 dirtyComponent 中 否则调用 batchedUpdates 处理发起一个 transaction.perform()。
var transaction new ReactDefaultBatchingStrategyTransaction();
var ReactDefaultBatchingStrategy {isBatchingUpdates: false,batchedUpdates: function(callback, a, b, c, d, e) {var alreadyBatchingUpdates ReactDefaultBatchingStrategy.isBatchingUpdates;ReactDefaultBatchingStrategy.isBatchingUpdates true;if (alreadyBatchingUpdates) {return callback(a, b, c, d, e);} else {return transaction.perform(callback, null, a, b, c, d, e);}},
};5. transaction initialize and close 源码路径 src/renderers/shared/stack/reconciler/ReactDefaultBatchingStrategy.js Transaction 中注册了两个 wrapperRESET_BATCHED_UPDATES 和 FLUSH_BATCHED_UPDATES。
initialize 阶段两个 wrapper 都是空方法什么都不做。
close 阶段RESET_BATCHED_UPDATES 将 isBatchingUpdates 设置为falseFLUSH_BATCHED_UPDATES 运行 flushBatchedUpdates 执行update。
相关参考视频讲解进入学习
var RESET_BATCHED_UPDATES {initialize: emptyFunction,close: function() {ReactDefaultBatchingStrategy.isBatchingUpdates false;},
};
var FLUSH_BATCHED_UPDATES {initialize: emptyFunction,close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};6. 渲染更新 ReactUpdates.flushBatchedUpdates() - ReactUpdates.runBatchedUpdates() - ReactCompositeComponent.performUpdateIfNecessary() - receiveComponent() updateComponent() runBatchedUpdates循环遍历dirtyComponents数组主要干两件事: 首先执行 performUpdateIfNecessary 来刷新组件的 view执行之前阻塞的 callback receiveComponent 最后会调用 updateComponent updateComponent 中会执行 React 组件存在期的生命周期方法如 componentWillReceiveProps shouldComponentUpdate componentWillUpdaterender, componentDidUpdate。 从而完成组件更新的整套流程 在shouldComponentUpdate之前执行了_processPendingState方法,该方法主要对state进行处理 如果更新队列为null那么返回原来的state如果更新队列有一个更新那么返回更新值如果更新队列有多个更新那么通过for循环将它们合并 在一个生命周期内在componentShouldUpdate执行之前所有的state变化都会被合并最后统一处理。
flushBatchedUpdates(); runBatchedUpdates() 源码路径 src/renderers/shared/stack/reconciler/ReactUpdates.js
var flushBatchedUpdates function() {while (dirtyComponents.length || asapEnqueued) {if (dirtyComponents.length) {var transaction ReactUpdatesFlushTransaction.getPooled();transaction.perform(runBatchedUpdates, null, transaction);ReactUpdatesFlushTransaction.release(transaction);}if (asapEnqueued) {asapEnqueued false;var queue asapCallbackQueue;asapCallbackQueue CallbackQueue.getPooled();queue.notifyAll();CallbackQueue.release(queue);}}
};
function runBatchedUpdates(transaction) {var len transaction.dirtyComponentsLength;dirtyComponents.sort(mountOrderComparator);updateBatchNumber;for (var i 0; i len; i) {// dirtyComponents中取出一个componentvar component dirtyComponents[i];// 取出dirtyComponent中的未执行的callbackvar callbacks component._pendingCallbacks;component._pendingCallbacks null;var markerName;if (ReactFeatureFlags.logTopLevelRenders) {var namedComponent component;if (component._currentElement.type.isReactTopLevelWrapper) {namedComponent component._renderedComponent;}markerName React update: namedComponent.getName();console.time(markerName);}// 执行updateComponentReactReconciler.performUpdateIfNecessary(component,transaction.reconcileTransaction,updateBatchNumber,);// 执行dirtyComponent中之前未执行的callbackif (callbacks) {for (var j 0; j callbacks.length; j) {transaction.callbackQueue.enqueue(callbacks[j],component.getPublicInstance(),);}}}
}performUpdateIfNecessary() 源码路径 src/renderers/shared/stack/reconciler/ReactReconciler.js
performUpdateIfNecessary: function(internalInstance,transaction,updateBatchNumber,) {internalInstance.performUpdateIfNecessary(transaction);},
};performUpdateIfNecessary() 源码路径 src/renderers/shared/stack/reconciler/ReactCompositeComponent.js performUpdateIfNecessary: function(transaction) {if (this._pendingElement ! null) {ReactReconciler.receiveComponent(this,this._pendingElement,transaction,this._context,);} else if (this._pendingStateQueue ! null || this._pendingForceUpdate) {this.updateComponent(transaction,this._currentElement,this._currentElement,this._context,this._context,);} else {this._updateBatchNumber null;}},updateComponent() 源码路径 src/renderers/shared/stack/reconciler/ReactCompositeComponent.js
事务概念
简单地说一个 Transaction 就是将需要执行的 anyMethod 使用 wrapper 封装起来在通过 Transaction 提供的 perform 方法执行而在 perform 之前先执行所有 wrapper 中的 initialize 方法perform 之后再执行所有 wrapper 中的 close 方法。一组 initialize 及 close 方法称为一个 wrapperTransaction 支持多个 wrapper 叠加。 React 中的 Transaction 提供了一个 Mixin 方便其他模块实现自己需要的事务。要实现自己的事务需要额外实现一个抽象的 getTransactionWrappers() 接口这个接口是 Transaction 用来获取所有 wrapper 的 initialize 和 close 方法因此需要返回一个数组对象每个对象分别有 key 为 initialize 和 close 的方法。
var Transaction require(Transaction);
var emptyFunction require(emptyFunction);var RESET_BATCHED_UPDATES {initialize: emptyFunction,close: function() {ReactDefaultBatchingStrategy.isBatchingUpdates false;},
};var FLUSH_BATCHED_UPDATES {initialize: emptyFunction,close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};var TRANSACTION_WRAPPERS [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];function ReactDefaultBatchingStrategyTransaction() {this.reinitializeTransaction();
}Object.assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, {getTransactionWrappers: function() {return TRANSACTION_WRAPPERS;},
});setState 流程 setState 流程还是很复杂的设计也很精巧避免了重复无谓的刷新组件React大量运用了注入机制这样每次注入的都是同一个实例化对象防止多次实例化 enqueueSetState 将 state 放入队列中并调用 enqueueUpdate 处理要更新的 Component如果组件当前正处于 update 事务中则先将 Component 存入 dirtyComponent 中。否则调用 batchedUpdates 处理batchedUpdates 发起一次 transaction.perform() 事务开始执行事务初始化运行结束三个阶段 初始化事务初始化阶段没有注册方法故无方法要执行运行执行 setSate 时传入的 callback 方法一般不会传 callback 参数结束执行 RESET_BATCHED_UPDATES FLUSH_BATCHED_UPDATES 这两个 wrapper 中的 close 方法 FLUSH_BATCHED_UPDATES 在 close 阶段flushBatchedUpdates 方法会循环遍历所有的 dirtyComponents 调用 updateComponent 刷新组件并执行它的 pendingCallbacks , 也就是 setState 中设置的 callback 组件挂载后setState一般是通过DOM交互事件触发如 click 点击button按钮ReactEventListener 会触发 dispatchEvent方法dispatchEvent 调用 ReactUpdates.batchedUpdates进入事务init 为空 anyMethod 为 ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping); handleTopLevelImpl 是在这边调用DOM事件对应的回调方法然后是setState() 将state的变化和对应的回调函数放置到 _pendingStateQueue 和 _pendingCallback 中把需要更新的组件放到 dirtyComponents 序列中 执行 perform()执行 close 渲染更新
dispatchEvent: function(topLevelType, nativeEvent) {if (!ReactEventListener._enabled) {return;}var bookKeeping TopLevelCallbackBookKeeping.getPooled(topLevelType,nativeEvent,);try {// Event queue being processed in the same cycle allows// preventDefault.ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);} finally {TopLevelCallbackBookKeeping.release(bookKeeping);}
}
