setState原理解析

发表于

setState是一个合成事件，react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了原生的事件，像在jsx中常见的onClick、onChange这些都是合成事件。
在一个事件handler中，不管setState会调用多少次，他们也会在函数执行后执行，被归结为一次渲染
可以优化性能, 这个等到最后一起执行的行为被称为batching。

1
2
3
4
5
6
7
8
9
10

//假设现在this.state.value = 0;
 
function eventHandler(){
    this.setState({value:this.state.value + 1});
    this.setState({value:this.state.value + 1});
    this.setState({value:this.state.value + 1});
}
 
//最后this.state.value仍然会是1，不是3;

所以这时候要更新的话，应该传入一个函数给setState,这个函数有2个参数，第一个是previousState,第二个为props.

1
2
3
4
5
6
7
8
9
// 假设 this.state = { value: 0 };
 
function eventHandler(){
    this.setState((state) => ({ value: state.value + 1}));
    this.setState((state) => ({ value: state.value + 1}));
    this.setState((state) => ({ value: state.value + 1}));
}
 
//现在this.state.value === 3;

当setState不在事件handler中，而在一个回调中，这样的batching异步就不会发生

1
2
3
4
5
6
promise.then(() => {

  // 不在事件函数中，所以setState立刻执行
  this.setState({a: true}); // 重新渲染 {a: true, b: false }
  this.setState({b: true}); // 重新渲染 {a: true, b: true }
})

####batchUpdate
batchUpdate的本质是一个批量更新

Batch Update 即「批量更新」。在 MV* 框架中，Batch Update 可以理解为将一段时间内对 model 的修改批量更新到 view 的机制。以 React 为例，我们在 componentDidMount 生命周期连续调用 setState ：
React中的batch update是通过一个事务机制来实现的。
Transaction对一个函数进行包装，让react有机会在一个函数运行前后执行特定的逻辑。从而完成整个 Batch Update 流程的控制。
在事务初始化状态，一个update Queue被创建，调用setState方法的时候，不会马上跟新。而是被推入update Queue当中。当执行结束后会执行queue的flush操作，进行setState赋值。