React 18 中 hooks 的顺序是怎样的?

Cha*_*ANI 5 javascript typescript reactjs react-hooks

React 18实现了一个新的钩子:useInsertionEffect.

那么对于useEffectand来说useLayoutEffect,这 3 个钩子在组件生成时的顺序是什么?

小智 12

根据React 文档

使用插入效果

它在所有 DOM 突变之前同步触发。读取useLayoutEffect.​ 所以它在 之前运行useLayoutEffect

使用布局效果

它在所有 DOM 突变同步触发。使用它从 DOM 读取布局并同步重新渲染。

使用效果

它将在渲染提交到屏幕后运行。所以它运行在useLayoutEffect.

因此运行顺序为:

  1. 使用插入效果
  2. 使用布局效果
  3. 使用效果