react是通过state管理组件，state的变化会导致组件的更新，而state的变化则是通过setState（）方法控制。state具体指代：展示在界面中的component的状态
state is a reference to the component state at the time the change is being applied
setState目的
setState方法会重新调用组件的render方法，实现组件的更新。需要注意的是setState方法是异步更新state的值。
setState（）
setState(updater[, callback])
第一个参数：updater是一个函数；可替换为一个对象（常用）
(state, props) => stateChange
例如：
this.setState((state, props) => {
return {counter: state.counter + props.step};
});
this.setState({ counter: 3 });
第二个参数：可选的回调函数，当setState（）完成 component re-rendered之后调用
setState（）函数可接受函数或者对象作为参数
setState工作原理
- setState队列机制更新state
- 多次调用setState时，react内部会合并处理
- 调用setState时，state中的值会浅复制合并
将setState（）看做一个队列，React不能保证立即执行命令，即setState（）不能保证立即更新state的值，这与setState的调用栈有关。
Think of setState() as a request rather than an immediate command to update the component
state变化基于之前的state
handleClickOnLikeButton () {
console.log(this.state.isLiked)
this.setState({
isLiked: !this.state.isLiked
})
console.log(this.state.isLiked)
}
// 打印的值是相同的
multiple calls during the same cycle may be batched together.
Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
...
) // 实际只会增加一次
this.setState((state) => {
return {quantity: state.quantity + 1};
}); // 会一直累加
setState调用栈
setState（）方法到实际渲染组件中间做了些什么，具体是怎么改变state的值？
setState（newState）改变state的值，将newSate存入更新队列，合并更新队列，如果存在 _pendingElement、_pendingStateQueue和_pendingForceUpdate，则更新组件。如下图所示
setState（）最终是通过enqueueUpdate执行state的更新,enqueueUpdate源代码如下
function enqueueUpdate(component) {
ensureInjected();
// 如果不处于批量更新模式，则调用batchedUpdates方法更新组件
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component);
return;
}
// 如果处于批量更新模式，则将该组件保存在 dirtyComponents 数组中
dirtyComponents.push(component);
}
batchedUpdates方法是batchingStrategy的其中一个属性，batchingStrategy源代码如下：
var ReactDefaultBatchingStrategy = {
isBatchingUpdates: false,
batchedUpdates: function(callback, a, b, c, d, e) {
var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
ReactDefaultBatchingStrategy.isBatchingUpdates = true;
/*
* isBatchingUpdates为true时，对所有队列中的更新执行 batchedUpdates 方法，
* 否则将调用setState的组件（当前组件）放入dirtycomponents数组中
*/
if (alreadyBatchingUpdates) {
callback(a, b, c, d, e);
} else {
transaction.perform(callback, null, a, b, c, d, e);
}
},
}
例子
思考以下面代码的输出
class Example extends Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次输出
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次输出
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次输出
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次输出
}, 0);
}
render() {
return null;
}
}
输出为：0,0,2,3
componentDidMout（）前2次setState时，batchingStrategy的 isBatchingUpdates 已经被设为 true，所以两次 setState 的结果并没有立即生效，而被存入dirtyComponents数组中，所以前2次打印的值均为0；setTimeout 中的两次 setState ，因为没有前置的 batchedUpdate 调用，所以batchingStrategy 的 isBatchingUpdates 标志位是 false，也就导致了新的 state 立马生效，没有走到 dirtyComponents 分支（调用栈图），即setTimeout 中第一次执行 setState 时，this.state.val为 1，而 setState 完成后打印时 this.state.val 变成了 2。第二次的 setState 同理
