React Hooks：'useMutationEffect' 和 'useLayoutEffect' 有什么区别？

Question

useMutationEffect和useLayoutEffect在用法上有什么区别？

我已在线阅读所有可用的material，包括（但不限于）

1. Hooks Reference
2. Blog post by Kent

useEffect 和其他两个钩子的区别很明显。但 useMutationEffect 和 useLayoutEffect 之间的区别仍然不清楚。

我知道执行顺序是：

1. 使用突变效应
2. 使用布局效果
3. 使用效果

Answer 1

首先，你要了解different phases of Rendering。

用户可见的 DOM 突变必须在下一次绘制之前同步触发，这样用户就不会察觉到视觉上的不一致。对于这种特定情况，我们应该使用 useMutationEffect 或 useLayoutEffect 来执行阻塞视觉更新。这两者之间的唯一区别是如果我们想从 DOM 读取布局，我们应该使用 useLayoutEffect。否则，我们应该使用 useMutationEffect.

1. useMutationEffect

它在布局阶段之前同步触发，即在 React 执行其 DOM 突变的同一阶段。使用它来执行阻止自定义 DOM 突变而不采用任何 DOM measurement/reading 布局。

2. useLayoutEffect

它在所有 DOM 突变之后但在 Paint 阶段之前同步触发。使用它从 DOM 中读取布局（样式或布局信息），然后根据布局执行阻止自定义 DOM 突变。

3. useEffect

它在渲染提交到屏幕后运行，即在布局和绘制阶段之后。尽可能使用它以避免阻止视觉更新。

更新： useMutationEffect 挂钩已从 Hooks API in this PR. (Credits: Dhaval Patel)

中删除