useEffect和useLayoutEffect的区别

作者:guo-zi-xin

更新于:2 个月前

字数统计:484 字

阅读时长:1 分钟

• useEffect: 执行时机是在React的渲染和提交阶段之后，这意味着当任何相关DOM更改被应用并且组件已经被重新渲染后，useEffect里的代码会执行。但它是异步的，所以可能会在浏览器的下一个绘制周期之后才会执行。

• useLayoutEffect: 执行时机是在React的提交阶段之后，但在浏览器实际绘制屏幕之前。这使得你可以同步的读取或更改DOM，然后让浏览器在下一次绘制时立即体现这些更改，从而避免不必要的闪烁或布局跳动。

何时使用useEffect

• 副作用与DOM无关: 例如数据获取、配置订阅，手动更改浏览器的URL等等。
• 不需要立即同步读取或更改DOM: 如果不关心可能的微小布局跳动或闪烁，那么使用useEffect足够了
• 性能考虑 useEffect通常对性能影响较少，因为他不会阻塞浏览器渲染

何时使用useLayoutEffect

• 需要同步读取或更改DOM: 例如 读取元素的大小或位置 并在渲染前进行调整。
• 防止闪烁: 在某些情况下，异步的useEffect可能会导致可见的布局跳动或闪烁。例如动画的启动或某些可见的快速DOM更改。
• 模拟生命周期方法: 如果正在将旧的类组件迁移到功能组件，并需要模拟componentDidMount、componentDidUpdate、componentWillUnmount的同步行为

使用注意事项

• 避免过度使用useLayoutEffect,因为它是同步的，可能会影响应用的性能。只有当确实需要同步操作DOM的时候才会使用它
• 如果代码在服务器端渲染(SSR)中出现问题，考虑回退到useEffect. 在服务器端渲染时不会运行，可能会引发警告或错误