React定义了React Component的构造函数,用于生成React Component。

React Component构造函数

React/lib/ReactComponent.jsReactComponent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function ReactComponent(props, context, updater) {
this.props = props; // Component的属性对象
this.context = context; // Component的上下文对象
this.refs = emptyObject; // Component内的React Element索引,默认是空对象
this.updater = updater || ReactNoopUpdateQueue; // Component的更新存储对象,用于存储待更新的state,state callback,forceUpdate函数等
}

ReactComponent.prototype.isReactComponent = {};

// 更新state,将新的局部state存入setState的等待队列,如果有回调,将回调存入对应的等待队列
ReactComponent.prototype.setState = function (partialState, callback) {
this.updater.enqueueSetState(this, partialState);
if (callback) {
this.updater.enqueueCallback(this, callback, 'setState');
}
}

// 强制更新,将React Component实例存入forceUpdate的等待队列,如果有回调,将回调存入对应的等待队列
ReactComponent.prototype.forceUpdate = function (callback) {
this.updater.enqueueForceUpdate(this);
if (callback) {
this.updater.enqueueCallback(this, callback, 'forceUpdate');
}
};

setState中传入的partialState既可以是对象也可以是函数,如果是函数,则执行后返回的值作为partialState。

在调用setState之后读取的this.state不一定是更新过的。因为setState有存入队列这样的行为,React会等到setState所在函数执行完毕之后,再去队列里面执行setState。

因为存入队列批量处理的原因,setState的更新不是同步的,如果需要读取更新后的state,可以传入callback回调函数,在回调里读取最新state。

callback的结构如下

1
2
3
function callback(state, props, context) {
// handle
}

此时传入的state是最新的,但是在函数里读取的this.state,this.props,this.context却不一定和callback传入的参数同步,因为callback的调用可能发生在receiveProps之后,shouldComponentUpdate之前,此时的新state,props或context还没有同步给this。

forceUpdate用于强制更新React Component,当Component处于DOM transaction中时,不建议调用forceUpdate。

当state的结构比较深,并且是子结构发生了变化,React浅比较不出state的变化时,比较适合调用forceUpdate来强制更新Component。

调用forceUpdate之后,Component在更新时不会调用shouldUpdateComponent了,但是仍会调用componentWillUpdate和componentDidUpdate。

updater默认值ReactNoopUpdateQueue

React Component中的updater用于提供队列来存储更新state和回调等,它的默认结构是ReactNoopUpdateQueue,具体结构如下所示。

React/lib/ReactNoopUpdateQueue.jsReactNoopUpdateQueue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ReactNoopUpdateQueue = {

// 判断React Component是否已挂载
isMounted: function (publicInstance) {return false;},

// 将setState回调函数存入等待队列
enqueueCallback: function (publicInstance, callback) {},

// 将forceUpdate函数存入等待队列
enqueueForceUpdate: function (publicInstance) {},

// 将replaceState函数存入等待队列
enqueueReplaceState: function (publicInstance, completeState) {},

// 将setState要设置的partialState存入等待队列
enqueueSetState: function (publicInstance, partialState) {}
}

React Component对象

实例化后的React Component对象如下:

1
2
3
4
5
6
{
props: {},
context: {},
refs: {},
updater: {}
}