setState 是 react 中更新 UI 的唯一方法，其内部实现原理如下：
- 调用
setState函数时，React 将传入的参数对象加入到组件的更新队列中。 - 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;
