返回

React-setState 解析：从同步到异步

前端

从结论和图都可以得出，setState 是一个 batching 的过程##

React 官方认为，setState 会导致 re-redering，而 re-redering 的代价是昂贵的，所以他们会尽可能的把多次操作合并成一次提交。以下这段话是 Dan 在 Issue 中的回答：

同步… 对不起，实际上同步并不是真的。在高性能浏览器中，React 尝试使用 flushSync 函数将对 DOM 的更改立即同步到屏幕，并在较低性能的浏览器中使用 requestAnimationFrame 将其异步化。

当我们调用 setState 时，React 会将新的 state 保存起来，然后在适当的时候进行更新。这个更新过程是异步的，也就是说它不会立即发生。React 会把多个 setState 操作合并成一次更新，这样可以减少对 DOM 的操作次数，提高性能。

setState 工作原理##

setState 的工作原理可以分为以下几个步骤：

  1. 当我们调用 setState 时，React 会将新的 state 保存起来。
  2. React 会根据新的 state 计算组件的新 props。
  3. React 会调用组件的 shouldComponentUpdate 方法来判断组件是否需要更新。
  4. 如果 shouldComponentUpdate 返回 true，React 会调用组件的 render 方法来生成新的虚拟 DOM。
  5. React 会将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，并生成一个更新补丁。
  6. React 会将更新补丁应用到真实 DOM 上，从而完成更新过程。

批处理更新机制##

React 的批处理更新机制可以将多个 setState 操作合并成一次更新，这样可以减少对 DOM 的操作次数，提高性能。

批处理更新机制的工作原理可以分为以下几个步骤：

  1. 当我们调用 setState 时，React 会将新的 state 保存起来。
  2. React 会启动一个更新队列，并将新的 state 添加到更新队列中。
  3. 当更新队列中的 state 数量达到一定数量时，或者当我们手动调用 forceUpdate 方法时，React 会将更新队列中的 state 合并成一次更新。
  4. React 会调用组件的 shouldComponentUpdate 方法来判断组件是否需要更新。
  5. 如果 shouldComponentUpdate 返回 true，React 会调用组件的 render 方法来生成新的虚拟 DOM。
  6. React 会将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，并生成一个更新补丁。
  7. React 会将更新补丁应用到真实 DOM 上，从而完成更新过程。

重渲染过程##

当组件的 state 发生变化时，React 会触发组件的重新渲染过程。重新渲染过程可以分为以下几个步骤：

  1. React 会调用组件的 shouldComponentUpdate 方法来判断组件是否需要更新。
  2. 如果 shouldComponentUpdate 返回 true，React 会调用组件的 render 方法来生成新的虚拟 DOM。
  3. React 会将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，并生成一个更新补丁。
  4. React 会将更新补丁应用到真实 DOM 上，从而完成更新过程。

如何在组件中巧妙使用 setState 和生命周期函数##

为了在组件中巧妙地使用 setState 和生命周期函数，我们需要了解以下几个要点：

  • 尽量避免在组件的 render 方法中调用 setState，因为这会导致组件重新渲染。
  • 可以使用 shouldComponentUpdate 方法来判断组件是否需要更新。
  • 可以使用 componentDidUpdate 生命周期函数来在组件更新后执行某些操作。

通过合理地使用 setState 和生命周期函数，我们可以提高组件的性能和可维护性。