useMutationEffect
和 useLayoutEffect
在使用方面有什么区别?
我已阅读所有在线可用 Material ,包括(但不限于)
useEffect 和其他两个钩子(Hook)之间的区别很明显。但 useMutationEffect
和 useLayoutEffect
之间的区别仍然不清楚。
我知道执行顺序是:
- 使用MutationEffect
- 使用布局效果
- 使用效果
最佳答案
首先,你必须了解different phases of Rendering .
用户可见的 DOM 突变必须在下一次绘制之前同步触发,以便用户不会感觉到视觉不一致。对于这种特定情况,我们应该使用 useMutationEffect
或 useLayoutEffect
来执行阻塞视觉更新。这两者之间的唯一区别是,如果我们想从 DOM 读取布局,我们应该使用 useLayoutEffect
。否则,我们应该使用 useMutationEffect
。
useMutationEffect
它在布局阶段之前同步触发,即在 React 执行 DOM 突变的同一阶段。使用它来执行阻止自定义 DOM 突变,而无需进行任何 DOM 测量/读取布局。
useLayoutEffect
它在所有 DOM 突变之后但在 Paint 阶段之前同步触发。使用它从 DOM 读取布局(样式或布局信息),然后根据布局执行阻止自定义 DOM 更改。
useEffect
它在渲染提交到屏幕后运行,即在布局和绘制阶段之后。尽可能使用此选项以避免阻止视觉更新。
更新: useMutationEffect Hook 已从 Hooks API 中删除in this PR 。 (来源:Dhaval Patel)
关于reactjs - react Hook : What is the difference between 'useMutationEffect' and 'useLayoutEffect' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53513872/