回调函数是同步还是异步_[React] 4 - setState / 异步还是同步?

1. CODE I - 点击更新state

class App extends Component {state = { val: 0 }batchUpdates = () => {this.setState({ val: this.state.val + 100 })this.setState({ val: this.state.val + 200 })this.setState({ val: this.state.val + 300 })}render() {console.log(this.state.val)return (<div onClick={this.batchUpdates}>{`Counter is ${this.state.val}`} // 1</div>)}
}

console.log(this.state.val) // 输出为300

为什么是1? setState 将更新内容放入到更新队列中, 防止频繁更新带来的render()更新，对state进行【批量更新】，所以当批量更新的时候，因为key值是一样的，所以被覆盖了, 所以就只是最后一个setState的更新

class Button extends React.Component {state = { val: 0 }batchUpdates = () => {this.setState({ val: this.state.val + 1 })this.setState({ val: this.state.val + 1 })this.setState({ val: this.state.val + 1 })}componentWillMount () {this.setState({ val: this.state.val + 1 }) // 放入队列中执行 val = 0}componentDidMount() {console.log(this.state.val) // componentWillMount执行结果 val = 1this.setState({ val: this.state.val + 1 }) // 放入队列中执行}render() {console.log('+++++++++++++', this.state.val) // componentDidMount执行结果后 首次渲染是 val = 2return (<div onClick={this.batchUpdates}>{`Counter is ${this.state.val}`} // 1</div>)}}

2. CODE II - setTimeout

componentWillMount() {// 1this.setState({ value: this.state.value + 1 })console.log('1', this.state)// 2this.setState({ value: this.state.value + 1 })console.log('2',this.state)// 3setTimeout(() => {this.setState({ value: this.state.value + 1 })console.log('3-1', this.state)this.setState({ value: this.state.value + 1 })console.log('3-2', this.state)}, 0)

componentWillMount 整体是一个触发的事件。

// 1

A = this.setState({ value:this.state.value +1})
放入执行队列中 [A]
console.log('1',this.state) // 0 因为此时, setState没有执行

// 2

B = this.setState({ value:this.state.value +1})
放入执行队列中 [A, B]
console.log('2',this.state) // 0 因为此时, setState没有执行

// 3 setTimeout 异步 [A, B]

// 4 [A, B] 执行, 是批量同步，因为key值相同，所以this.state.val = 1

// 5 this.setState 本身是个同步, 只是放到队列中，队列执行是模拟'异步'的。单独每个是个队列。执行是同步

      this.setState({ value: this.state.value + 1 }) // 1 + 1console.log('3-1', this.state) // 2this.setState({ value: this.state.value + 1 }) // 2 + 1console.log('3-2', this.state) // 3

console.log('3-1',this.state) // 2

console.log('3-2',this.state) // 3

3. CODE III - 原生事件机制

class App extends Component {state = { val: 0 }changeValue = () => {// 0this.setState({ val: this.state.val + 1 }) // 1console.log(this.state.val) // 输出的是更新后的值 --> 1this.setState({ val: this.state.val + 1 }) // 1 + 1 = 2console.log(this.state.val) // 输出的是更新后的值 --> 2}componentDidMount() {// 事件机制 同步document.body.addEventListener('click', this.changeValue, false)}render() {return (<div>{`Counter is: ${this.state.val}`}</div>)}
}

4. CODE 发现

当在 addEventListener 原生事件或 setTimeout 里面的 setState, 是同步更新的。
但是除此之外的更新，就是 异步的批量更新的。

为虾米??????

5. 为什么?

【setState解决问题】

批量更新, 减少state的频繁更新，从而避免重复的View刷新, render()的调用。

【异步? 同步?】

setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。

【setTimeout或原生事件】

没有走React的合成事件机制，机制是异步的, 但是setState本身是个同步的。

6. RECAP

你真的理解setState吗？ - 掘金juejin.im

【setState同步? 异步?】: 本身是同步的(执行逻辑和代码都是同步的)，因为React的合成事件机制，让其现看起来很 '异步'。为了解决频繁render(), 所以批量更新。

【批量更新】: 因为key值相同，批量更新会让后面的覆盖掉前面的值，所以更新的值只会是最后一个this.setState的内容。(如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新)

引用来自下面的链接

React - setState源码分析（小白可读）juejin.im

上面图: 一个函数的事件机制, 把setState内容放到队列中，等到队列执行完，close掉该事件后，再render。
下面图: 事件机制已经close了，setTimeout执行两个setState内容，每个setState都是新的单独的执行队列，所以render了两次。
componentDidMount 这样执行, 触发 render 两次的案例。

class Button extends React.Component {state = { val: 0 }componentWillMount () {this.setState({ val: this.state.val + 10 })}componentDidMount() {setTimeout(() => {console.log(this.state.val) // 10this.setState({ val: this.state.val + 20 }) // 触发一次renderconsole.log(this.state.val) // 30this.setState({ val: this.state.val + 30 }) // 再次 触发一次 renderconsole.log(this.state.val) // 60}, 0)}render() {/*** 1. componentWillMount, 10* 2. componentDidMount - setTimeout: 10 + 20 = 30* 3. componentDidMount - setTimeout: 30 + 30 = 60*/console.log('+++++++++++++', this.state.val) return (<div>{`Counter is ${this.state.val}`}</div>)}}

7. 最后的最后

React基础2--深入挖掘setStatewww.jianshu.com

if (!batchingStrategy.isBatchingUpdates) {batchingStrategy.batchedUpdates(enqueueUpdate, component);return;}
dirtyComponents.push(component);

判断: 是否属于批量更新状态?
YES: 是批量更新。不进行state的更新操作, 将需要更新的组件放到 dirtyComponents数组中
NO: 不是批量更新。进行更新操作。

【流程】

将setState事务放入队列中
存入队列: 组件对象和变更state内容
队列处理: 合并队列, 是否有需要合并更新的
判断正否处于【创建或更新组件】阶段，此时暂时不处理更新事宜，放到dirtyComponents数组中，等待更新。没有组件处于【创建或更新组件】该阶段。才去执行setState。
如果不是，那就直接更新。
更新过程: TRANSACTION 事务处理组件的update。事务处理完后会调用wrapper.close()

*放在setTimeout异步函数，组件已经【创建或更新完成】此时也不需要等了。直接就执行了。