作者 : 墨成
React 版本 :16.4.1
在React启示录里我们说setState是异步的,我们在代码中也展示了这种特性,那么FB的工程师们是如何实现呢,本文将基于React的源码进一步揭开这层面纱。
在介绍之前我们首先看下setState的实现和FB工程师的注释,我简单的作了一些翻译
//ReactBaseClass.js
/**
* Sets a subset of the state. Always use this to mutate
* state. You should treat `this.state` as immutable.
* //我们应该使用这个方法(setState)来改变state,而不是使用this.state(翻译可能跟原文有一点偏差,当表达的意思是这样)
* There is no guarantee that `this.state` will be immediately updated, so
* accessing `this.state` after calling this method may return the old value.
*//setState并不会立即更新,在调用这个方法后拿到的this.state可能还是原来的值
* There is no guarantee that calls to `setState` will run synchronously,
* as they may eventually be batched together. You can provide an optional
* callback that will be executed when the call to setState is actually
* completed.
*//setState不能保证是同步的,他们有可能会批量处理。你可以提供一个可选的回调函数来拿到更改之后的值
* When a function is provided to setState, it will be called at some point in
* the future (not synchronously). It will be called with the up to date
* component arguments (state, props, context). These values can be different
* from this.* because your function may be called after receiveProps but before
* shouldComponentUpdate, and this new state, props, and context will not yet be
* assigned to this.
*//setState第一参数是一个function ,他会在未来的某个时间点执行。在执行这个functon时我们都是拿到的最新的组件信息
*//(比如state,props, context).这些值根尼通过this.state的不一样,因为function实在receiveProps之后在
*//shouldComponentDupdate之前,所以这些值还没更新到当前this指向的这些值
* @param {object|function} partialState Next partial state or function to
* produce next partial state to be merged with current state.
* @param {?function} callback Called after state is updated.
* @final
* @protected
*/
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};复制代码
上面的注释告诉我们:
1.setState()第一参数是function也是异步的
2.function的执行周期是:receiveProps=>function=>shouldComponentUpdate
3. 基于第二点的说明,再回头看看官网对function的写法,我们知道为什么这个函数的第一参数叫 preState ,而props 就叫props而不是叫preProps的原因了.
(prevState, props) => stateChange复制代码
如果关于第一参数function的说明还不是很理解,多看几眼,多想想React生命周期,那就会茅塞顿开 .
言归正传,再看看整段代码
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};复制代码
参数:
@param partialState 部分状态复制代码
这个参数或许是整个state,或许只是state其中的一部分 ,最终React合并(就是merge).
state = {name:'myName',age:18} => setState({age:16}/*state的一部分*/)=>state={name:'myName',age:16}复制代码
其实就是Object.assign的理解 .
@param callback 回调函数,后面专门开一篇来讲解
复制代码
invariant 没什么好解释的 ,代码位于shared/invariant,是对error的一种封装,有兴趣的同学可以看看复制代码
今天就到这里,未完待续.......