react的setstate什么时候同步？什么时候是异步的

　　react的setstate什么时候同步什么时候是异步的react的setstate在原生事件和setTimeout中都是“同步”的而在合成事件和钩子函数中是“异步”的；在React中如果是由引发的事件处理调用setState不会同步更新“this.state”除此之外的setState调用会同步执行“this.state”。

　　
　　react的setstate什么时候同步什么时候是异步的
　　
　　先给出答案:
　　
　　有时表现出异步,有时表现出同步。
　　
　　setState只在合成事件和钩子函数中是“异步”的,在原生事件和setTimeout 中都是同步的。
　　
　　class Example extends React.Component {
　　
　　constructor() {
　　
　　super();
　　
　　this.state = {
　　
　　val: 0
　　
　　};
　　
　　}
　　
　　componentDidMount() {
　　
　　this.setState({val: this.state.val + 1});
　　
　　console.log(this.state.val);    // 第 1 次 log
　　
　　this.setState({val: this.state.val + 1});
　　
　　console.log(this.state.val);    // 第 2 次 log
　　
　　setTimeout(() => {
　　
　　this.setState({val: this.state.val + 1});
　　
　　console.log(this.state.val);  // 第 3 次 log
　　
　　this.setState({val: this.state.val + 1});
　　
　　console.log(this.state.val);  // 第 4 次 log
　　
　　}, 0);
　　
　　}
　　
　　render() {
　　
　　return null;
　　
　　}
　　
　　};
　　
　　1.setState只在合成事件和钩子函数中是“异步”的在原生事件和setTimeout 中都是同步的。
　　
　　2.setState 的“异步”并不是说内部由异步代码实现其实本身执行的过程和代码都是同步的只是合成事件和钩子函数的调用顺序在更新之前
　　
　　导致在合成事件和钩子函数中没法立马拿到更新后的值形成了所谓的“异步”当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
　　
　　3.setState 的批量更新优化也是建立在“异步” 合成事件、钩子函数之上的在原生事件和setTimeout 中不会批量更新
　　
　　在“异步”中如果对同一个值进行多次setStatesetState的批量更新策略会对其进行覆盖取最后一次的执行如果是同时setState多个不同的值在更新时会对其进行合并批量更新。
　　
　　在React中如果是由React引发的事件处理 比如通过onClick引发的事件处理调用setState不会同步更新this.state除此之外的setState调用会同步执行this.state。所谓“除此之外”指的是绕过React通过addEventListener直接添加的事件处理函数还有通过setTimeout/setInterval产生的异步调用。
　　
　　原因：
　　
　　在React的setState函数实现中会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说而isBatchingUpdates默认是false也就表示setState会同步更新this.state但是有一个函数batchedUpdates这个函数会把isBatchingUpdates修改为true而当React在调用事件处理函数之前就会调用这个batchedUpdates造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

上一篇：goland设置gopath的方法有哪些

下一篇：navicat如何使用sql语句创建表

---