React中的setState执行机制。

在React中，setState是一个异步操作，用于更新组件的状态(state)，并触发组件的重新渲染。

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用。

import React, { Component } from 'react'

export default 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.changeText()}>面试官系列</button>
            </div>
        )
    }

    changeText() {
        this.setState({
            message: "JS每日一题"
        })
    }
}

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

如果直接修改state的状态，如下：

changeText() {
    this.state.message = "你好";
}

我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变

这是因为React并不像vue2中调用Object.defineProperty数据响应式或者Vue3调用Proxy监听数据的变化必须通过setState方法来告知react组件state已经发生了改变。

关于state方法的定义是从React.Component中继承，定义的源码如下：

Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): takes an object of state variables to update or a ' +
      'function which returns an object of state variables.',
  );
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

从上面可以看到setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据。

setState的执行机制主要涉及以下几个方面：

1. 异步更新

setState通常是异步执行的，这意味着在调用setState之后，状态(state)不会立即更新。React会将多个setState调用批量处理，以提高性能。这种批量更新策略有助于避免不必要的重新渲染，从而优化性能。

changeText() {
  this.setState({
    message: "你好啊"
  })
  console.log(this.state.message); // Hello World
}

从上面可以看到，最终打印结果为Hello world，并不能在执行完setState之后立马拿到最新的state的结果。

如果想要立刻获取更新后的值，在第二个参数的回调中更新后会执行

changeText() {
  this.setState({
    message: "你好啊"
  }, () => {
    console.log(this.state.message); // 你好啊
  });
}

2. 合并状态更新

当你在一个周期内多次调用setState时，React会将这些状态更新合并成一个更新操作。这意味着如果你多次更新同一个状态字段，只有最后一次更新会被应用。

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
}

点击按钮触发事件，打印的都是 1，页面显示 count 的值为 2，对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果。

上述的例子，实际等价于如下：

Object.assign(  previousState,  {index: state.count+ 1},  {index: state.count+ 1},  ...)

由于后面的数据会覆盖前面的更改，所以最终只加了一次

如果是下一个state依赖前一个state的话，推荐给setState一个参数传入一个function，如下：

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

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

3. 事务性和一致性

React通过事务机制确保状态更新的一致性。在React的更新周期中，所有的setState调用都会被收集，然后一起批量处理。这保证了在任何给定时刻，组件的状态都是一致的。

4. 强制更新

在某些情况下，如果你需要绕过shouldComponentUpdate等生命周期方法，可以使用forceUpdate方法强制组件重新渲染。但这并不推荐，因为它可能会导致性能问题。