useLayoutEffect

何时使用useEffect:

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

何时使用useLayoutEffect:

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

使用注意事项:

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