useEffect 与 useLayoutEffect 和 useMutationEffect 的区别

╰+哭是因爲堅強的太久メ 2022-10-09 08:35 7阅读 0赞

## useEffect ##

99% 的情况下都用这个。当钩子稳定并且如果重构任何类组件以使用钩子时，可以将任何代码从 componentDidMount、componentDidUpdate 和 componentWillUnmount 移动到 useEffect。

## useLayoutEffect ##

这会在 React 执行完所有 DOM 更改后**立即同步运行**。useLayoutEffect和componentDidMount和componentDidUpdate触发时机一致（都在在DOM修改后且浏览器渲染之前）。**useLayoutEffect要比useEffect更早的触发执行**。useLayoutEffect会阻塞浏览器渲染，执行同步会耗时。如果需要进行 DOM 测量数值（例如获取元素的滚动位置或其他样式），然后进行 DOM 突变或通过更新状态触发同步重新渲染，用这个钩子准没错。

## useEffect 与 useLayoutEffect的例子 ##

![先弹窗，再重绘][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXZld2Vpc2NzZG4_size_20_color_FFFFFF_t_70_g_se_x_16]  
![重绘同时打印useEffect里的log][useEffect_log]

## useMutationEffect ##

这在 React 渲染您的组件的**同时同步运行**。如果要改变 DOM，就用这个钩子，但前提是你不需要从 DOM 中读取值。（这个钩子貌似已经废弃了）

## 总结 ##

*  **useMutationEffect**：如果你需要改变 DOM 但不需要执行测量数值
 *  **useLayoutEffect**：
    
     *  **useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行。**
     *  如果你需要改变 DOM 或者DOM需要获取测量数值，除非要修改DOM并且不让用户看到修改DOM的过程，才考虑**用它来读取 DOM 布局并同步触发重渲染**，否则应当使用useEffect。
     *  **在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新。**
     *  **尽可能使用标准的 useEffect 以避免阻塞视图更新**
 *  **useEffect**： **useEffect 在全部渲染完毕后才会执行。** 如果根本不需要与 DOM 交互或者你的 DOM 更改是不可观察的，那就用useEffect。

## 公众号 ##

欢迎大家关注我的公众号： 石马上coding，一起成长  
![石马上coding][coding]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXZld2Vpc2NzZG4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221005/2bc83a99fb08410bbc2e97815896f4cf.png
[useEffect_log]: /images/20221005/300ee0348bc943628709a7d1c8541453.png
[coding]: /images/20221005/b2e7efe53f9648aa9c607af49e737444.png