setState详解

news2025/2/1 4:04:52

this. setState( [partialState], [callback])

1.[partialState] :支持部分状态更改

this, setState({
x:100 //不论总共有多少状态，我们只修改了x，其余的状态不动
});

callback :在状态更改/视图更新完毕后触发执行，也可以说只要执行了setState, callback一定会执行

发生在componentDidUpdate周期函数之后，DidUpdate会在任何状态更改后都触发执行;而回调函数方式，可以在指定状态更新后处理一些事情;

2.特殊:
即便我们基于shouldComponentUpdate阻止了状态/视图的更新，DidUpdate周期函数肯定不会执行了，但是我们设置的这个
callback回调函数依然会被触发执行! !

类似于Vue框架中的$nextTick! !

在React18中，setState操作都是异步的「不论是在哪执行，例如:合成事件、周期函数、定时器…」

需要注意的是，React 可能会根据不同的情况使用不同的更新方式，而不一定会将所有的 setState 操作合并成一个更新操作。

3.目的:
实现状态的批处理「统一处理」

1.有效减少更新次数,降低性能消耗
2.有效管理代码执行的逻辑顺序

4.原理:
利用了更新队列updaters 机制来处理的

在当前相同的时间段内「浏览器此时可以处理的事情中」，遇到setState会立即放入到更新队列中!此时状态/视图还未更新。当所有的代码操作结束，会“刷新队列”「通知更新队列中的任务执行」:把所有放入的setState合并在一起执行，只触发一次视图更新「批处理操作」

setState的两种方式：对象式和函数式对比

在这里插入图片描述

对象式最后x为20被优化成一次性更新没有中间状态！！！函数式是20，会有中间状态

对象式和函数式在实际项目中的例子

在 React 中，当你连续地进行多个 setState 操作时，React 会将这些操作合并起来，然后一次性地进行状态更新。这种行为被称为“对象方式的合并”。

例如，你连续调用了三次 setState 方法：

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

如果使用的是对象方式更新状态，React 会将这三个对象合并成一个对象，然后进行一次性的状态更新，代码会被优化为：

this.setState({ count: this.state.count + 3 });

这种合并的行为，可以避免重复更新，提升 React 应用的性能。

但是，对于一些需要进行异步操作的场景，对象方式更新状态并不是一个好的选择。因为在异步操作中，合并并不总是起作用的。

举个例子

在进行网络请求时，你可能需要等待服务器返回数据，然后将返回的数据显示在页面上。如果你在网络请求代码块中使用对象方式更新状态，那么在请求还没有返回前，React 会将多个状态更新操作合并成一个更新操作，这可能会导致页面显示不正确或者渲染出错的问题。

因此，在这种场景下，使用函数方式更新状态是更好的选择。函数方式更新状态不会进行对象合并，而是将每次状态更新的操作包裹到一个更新函数中，然后将这个函数作为参数传递给 setState 方法。使用函数方式更新状态，可以避免对象方式进行状态合并时可能带来的问题。

在函数方式中，你可以使用当前状态和当前属性进行状态的更新。这样在状态更新的过程中不依赖于当前组件的状态，所以不会有状态合并的问题，而是针对当前状态进行更新。

如果你需要在网络请求后更新状态，可以这样写：

fetchData() {
  fetchDataFromServer()
    .then((data) => {
      // 使用函数方式更新状态
      this.setState((prevState, props) => {
        // 基于先前状态进行更新
        const newData = processData(data);
        return {
          data: newData,
        };
      });
    });
}