react基本功

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 用于缓存函数，避免在组件重新渲染时创建新的函数引用。

特点

• 用途：缓存函数引用。
• 执行时机：每次组件渲染时都会执行，但如果依赖项没有变化，则返回缓存的函数引用。

使用场景