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

Question

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

我已在线阅读了所有可用材料，包括（但不限于）

1. 挂钩参考
2. 肯特（Kent）的博客文章

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

我知道执行的顺序是：

1. useMutationEffect
2. useLayoutEffect
3. useEffect

Answer 1

首先，我们必须了解渲染的不同阶段

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

1. useMutationEffect

它在Layout阶段之前（即在React执行其DOM突变的同一阶段）同步触发。使用它可以执行阻止自定义DOM突变的操作，而无需进行任何DOM测量/读取布局。

2. useLayoutEffect

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

3. useEffect

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

更新： useMutationEffect挂钩已从https://github.com/facebook/react/pull/14336的Hooks API中 删除。（来源： Dhaval Patel）