【React setState的执行机制】

什么是setState

一个组件的显示形态由数据状态（state）和外部参数决定，当需要修改组件中的值的状态时，需要通过setState来改变，从而达到更新组件中的数据信息的效果

setState的使用误区

功能：点击按钮实现中英文的切换

import React, { Component } from 'react'

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            message: "Hello World"
        }
    }

    render() {
        return (
            <div>
                <h2>{this.state.message}</h2>
                <button onClick={(e) => {this.changeHandle()}}>转为中文</button>
            </div>
        )
    }

    changeHandle() {
        // 无效修改
        this.state.message = "你好 世界"
        // 有效修改
        this.setState({
            message:"你好 世界"
        })
    }
}

export default App

有效修改中：

通过点击按钮触发onClick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新

无效修改中：

页面并未发生任何反应，但state的状态是已经发生了改变，这是因为React并不像Vue2中调用

Object.DefineProperty数据响应式或者Vue3中调用Proxy监听数据的变化，必须通过setState方法

来告知react组件state已经发生了改变

setState的参数介绍

• 第一个参数可以是一个对象，或者是一个函数，
• 第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据

setState的更新方式

同步更新：原生dom事件

异步更新：合成事件

setState执行批量更新的不同情况

功能：实现数据的点击+1操作

// 方式1
handleClick = () => {
    this.setState({
        count: this.state.count + 1,
    })
    console.log(this.state.count) // 1

    this.setState({
        count: this.state.count + 1,
    })
    console.log(this.state.count) // 1

    this.setState({
        count: this.state.count + 1,
    })
    console.log(this.state.count) // 1
}

//方式2
onClick = () => {
    this.setState((prevState, props) => {
      return {count: prevState.count + 1};
    });
    this.setState((prevState, props) => {
      return {count: prevState.count + 1};
    });
}

方式1中：

点击按钮触发事件，打印的都是 1，页面显示count的值为 2

对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行结果

方式2中：

在或者原生dom事件中，由于是同步的操作，所以并不会进行覆盖现象

调和阶段 setState内部干了什么

• 首先将传递给setState的对象合并到组件的当前状态，开始进行和解
• 随后React将构建一个新的React元素树
• 为了弄清 UI 如何响应新的状态而改变，React 会利用diff算法将这个新元素树与旧元素树进行比较
• 通过比较，React知道了发生的确切变化并进行更新
• 最终达到了最小化UI的占用空间的优化效果

总结

以上就是我对于React中setState的一些理解，希望对有疑惑的你有所帮助！