做背景图 网站腾讯云网站备案流程图
useLayoutEffect
useLayoutEffect 用于在浏览器重新绘制屏幕之前同步执行代码。它与 useEffect 相同，但执行时机不同。
主要特点
- 执行时机：
useLayoutEffect在 DOM 更新完成后同步执行，但在浏览器绘制之前。这使得它可以在浏览器渲染之前读取和修改 DOM，避免视觉上的闪烁或不一致。 - 适用场景：主要用于需要同步调整布局的副作用操作，例如测量 DOM 元素的尺寸（如高度、宽度、滚动位置等）并根据这些值进行渲染。
- 性能影响：由于
useLayoutEffect阻塞了浏览器的绘制，如果执行复杂或耗时的操作，可能会导致性能问题或视觉卡顿。
与 useEffect 的区别
- 执行时间：
useEffect：在浏览器绘制之后异步执行。useLayoutEffect：在浏览器绘制之前同步执行。
注意事项
useLayoutEffect在服务器端渲染（SSR）中不会执行，因此在 SSR 场景下需要谨慎使用。- 尽量优先使用
useEffect，因为useLayoutEffect可能会影响性能。
总之，useLayoutEffect 是一个强大的工具，但应仅在需要同步处理 DOM 布局时使用。
useEffect
useEffect 可以用来实现类似类组件生命周期方法的功能。通过合理配置 ，可以模拟类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。
总结
但需要注意的是，useEffect 的执行时机是异步的，如果需要在浏览器绘制之前同步操作 DOM，可以使用 useLayoutEffect。
useCallback和useMemo的区别
1. useMemo
useMemo 用于缓存计算结果，避免在组件重新渲染时重复执行复杂的计算逻辑。
特点
- 用途：缓存计算结果。
2. useCallback
useCallback 用于缓存函数，避免在组件重新渲染时创建新的函数引用。
特点
- 用途：缓存函数引用。
- 执行时机：每次组件渲染时都会执行，但如果依赖项没有变化，则返回缓存的函数引用。