react1816中的setState同步还是异步的深层分析

setState 是 react 中更新 UI 的唯一方法，其内部实现原理如下：

1. 调用 setState 函数时，React 将传入的参数对象加入到组件的更新队列中。
2. React 会调度一次更新（reconciliation），在调度过程中，React 会根据组件的 state 和 props 来计算出组件的新的状态，并比较新旧的状态，决定是否需要重新渲染组件。

this.setState([particalState], [callback])中

• particalState 是一个对象，支持部分修改 state,只更新当前要修改的属性，其余的保持不变。
• callback 是可选的函数，在 setState 更新完成之后执行。类似于 vue 中的 nextTick 机制。
  • 发生在 componetDidUpdate 生命周期之后，DOM 更新完成之后。
  • componetDidUpdate 会在任何 state 更新之后调用，不管是否是 setState 引起的。
  • 这里的回调函数，只会在特定的 state 变化后出发，还要主动调用。
  • 即使我们使用了 shouldComponentUpdate返回 false 来组织组件更新， componentDidUpdate 不更新了，回调函数依然会执行。

import { Component } from "react";class ClassComp extends Component {state = {x: 10,y: 20,z: 0,};handleAdd = () => {// this是指向当前组件的实例，箭头函数式没有自己的thisthis.setState({x: this.state.x + 1,},() => {console.log(this.state.x, "xxxxxxxxxxxxx");});};shouldComponentUpdate() {return false;}componentDidUpdate() {console.log("componentDidUpdate class component");}render() {console.log("render class component");const { x, y, z } = this.state;return (<div>Class Component<p>x: {x}, y: {y} z:{z}<br /><button onClick={this.handleAdd}>add</button></p></div>);}
}
export default ClassComp;

setState 的同步与异步

• r18 中，setState 在任何地方都是异步的,包括合成事件，周期函数，定时器。。。

  • r18 中有一套更新队列的机制,[updater]来处理的
  • 基于异步操作实现状态的批处理

• 好处：

  • 异步的目的是为了性能优化，在多个 setState 调用时，可以合并成一个 state 更新

  • 异步的目的是为了防止 setState 调用过于频繁，造成性能问题

    
    
    

• 在 r18 之前。我们只在 react 的合成事件和生命周期函数中调用 setState 做批量更新，默认情况下，不会对原生事件,promise,setTimeout,requestAnimationFrame 等异步操作做批量更新。

r16 中的执行效果

r18 中的执行效果

需求

点击一个按钮，让数字 x 加一，结果为 30

import { Component } from "react";
class ClassComp extends Component {state = {x: 10,y: 20,z: 0,};handleAdd = () => {for (let i = 0; i < 20; i++) {this.setState(x:this.state.x+1);}console.log(this.state.x);};render() {console.log("render class component");const { x, y, z } = this.state;return (<div>Class Component<p>x: {x}, y: {y} z:{z}<br /><button onClick={this.handleAdd}>add</button></p></div>);}
}
export default ClassComp;

可以发现，打印结果为 1, 不是 30,改造代码，引入 flushSync
写法 1：

import { Component } from "react";
import { flushSync } from "react-dom";handleAdd = () => {for (let i = 0; i < 20; i++) {flushSync(() => {this.setState(x:this.state.x+1);}）}console.log(this.state.x);};export default ClassComp;

写法 2：

import { Component } from "react";
import { flushSync } from "react-dom";handleAdd = () => {for (let i = 0; i < 20; i++) {this.setState(x:this.state.x+1);flushSync()}console.log(this.state.x);};export default ClassComp;

可以看到 render 执行了 20 次，但是打印结果为 30,如果只让 render 执行一次，打印结果为 30,需要改造代码

import { Component } from "react";
class ClassComp extends Component {state = {x: 10,y: 20,z: 0,};handleAdd = () => {for (let i = 0; i < 20; i++) {this.setState((prev) => {return { x: prev.x + 1 };});}console.log(this.state.x);};render() {console.log("render class component");const { x, y, z } = this.state;return (<div>Class Component<p>x: {x}, y: {y} z:{z}<br /><button onClick={this.handleAdd}>add</button></p></div>);}
}
export default ClassComp;