首先，您必须了解Rendering的不同阶段。

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

1. useMutationEffect

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

2. useLayoutEffect

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

3. useEffect

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

更新： useMutationEffect 钩子已从此PR 中的Hooks API 中删除。（来源：Dhaval Patel）