useMutationEffect
和useLayoutEffect
在用法上有什么区别?
我已在线阅读所有可用材料,包括(但不限于)
useEffect
和其他两个钩子之间的区别很明显。useMutationEffect
但是和之间的区别useLayoutEffect
仍然不清楚。
我知道执行顺序是:
- 使用MutationEffect
- 使用布局效果
- 使用效果
useMutationEffect
和useLayoutEffect
在用法上有什么区别?
我已在线阅读所有可用材料,包括(但不限于)
useEffect
和其他两个钩子之间的区别很明显。useMutationEffect
但是和之间的区别useLayoutEffect
仍然不清楚。
我知道执行顺序是:
首先,您必须了解Rendering 的不同阶段。
对用户可见的 DOM 突变必须在下一次绘制之前同步触发,以便用户不会感知到视觉上的不一致。对于这种特定情况,我们应该使用useMutationEffect
或useLayoutEffect
来执行阻塞的视觉更新。这两者之间的唯一区别是,useLayoutEffect
如果我们想从 DOM 中读取 Layout,我们应该使用它。否则,我们应该使用useMutationEffect
.
useMutationEffect
它在 Layout 阶段之前同步触发,即在 React 执行其 DOM 突变的同一阶段。使用它来执行阻止自定义 DOM 突变,而无需采取任何 DOM 测量/读取布局。
useLayoutEffect
它在所有 DOM 突变之后但在 Paint 阶段之前同步触发。使用它从 DOM 中读取布局(样式或布局信息),然后根据布局执行阻止自定义 DOM 突变。
useEffect
它在渲染提交到屏幕后运行,即在布局和绘制阶段之后。尽可能使用它来避免阻止视觉更新。