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

Question

var duplicates = from d in list group d by d into c let count = c.Count() orderby count descending select new { Value = c.Key, Count = count }; foreach (var v in duplicates) { string strValue = v.Value; int Count = v.Count; } 和useMutationEffect在用法上有什么区别？

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

1. Hooks Reference
2. Blog post by Kent

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

我知道执行顺序是：

1. useMutationEffect
2. useLayoutEffect
3. useEffect

Answer 1

首先，我们必须了解different phases of Rendering

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

1. useMutationEffect

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

1. useLayoutEffect

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

1. useEffect

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

更新： useMutationEffect挂钩已从以下位置的Hooks API中删除： https://github.com/facebook/react/pull/14336。 （积分：Dhaval Patel）