setState过程

setState 过程

在 React 中，setState 方法用于更新组件的状态。当你调用 setState 时，React 会开始一个更新组件的过程。以下是 setState 过程的大致步骤：

1. 合并新状态：
   • React 首先会将你传递给 setState 的新状态（对象或函数）与当前的状态进行合并。
   • 如果你传递的是一个函数，这个函数会接收当前的状态和属性作为参数，并返回一个新的状态对象。
2. 调度更新：
   • React 并不会立即更新组件，而是将更新放入一个队列中。这是为了优化性能，因为 React 可能会批量处理多个 setState 调用，从而减少不必要的重新渲染。
   • 实际上，React 使用了调度器（Scheduler）和合成事件系统（SyntheticEvent System）来确保更新在适当的时候被处理。
3. 开始 React 更新流程：
   • 当 React 准备处理队列中的更新时，它会开始 React 的更新流程。
   • 这个流程包括确定哪些组件需要重新渲染（基于状态变化和 props 的变化）。
4. 调用生命周期方法（类组件）：
   • 对于类组件，React 会在更新过程中调用相应的生命周期方法。
   • 在 React 16.3 之前，这些方法可能包括 componentWillUpdate（已被弃用）和 componentDidUpdate。
   • 在 React 16.3 及更高版本中，componentWillUpdate 已被弃用，并引入了新的生命周期方法，如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。
5. 重新渲染：
   • React 会基于新的状态和 props 来重新渲染受影响的组件。
   • 这通常涉及调用组件的 render 方法来生成新的 React 元素树。
6. DOM 更新：
   • React 会使用 React 的 Diffing 算法（Reconciliation）来比较新的 React 元素树和旧的 DOM 树，以找出需要更改的部分。
   • 然后，React 会更新这些部分的 DOM，而不是重新渲染整个页面。
7. 调用生命周期方法（类组件）：
   • 在 DOM 更新后，React 会调用类组件的 componentDidUpdate 生命周期方法（如果定义了的话）。
8. 回调：
   • 如果你在调用 setState 时传递了一个回调函数作为第二个参数，这个回调将在更新被应用到 DOM 并且屏幕被更新后执行。

需要注意的是，从 React 18 开始，React 引入了新的并发模式（Concurrent Mode），它可能会改变一些更新和渲染的行为。在并发模式下，React 可能会延迟、中断、恢复或重新排序更新，以提供更好的用户体验。

另外，React 还提供了 useState Hook 来处理函数组件的状态。对于函数组件，React 会直接根据 useState 的返回值来更新组件的状态，并触发重新渲染。这个过程与类组件的 setState 过程类似，但实现方式略有不同。setState 过程