React 中 useLayoutEffect 的作用和用法是什么？

推荐答案

useLayoutEffect(() => {
  // 在这里执行 DOM 操作或其他副作用
  return () => {
    // 在这里执行清理操作
  };
}, [dependencies]);

本题详细解读

作用

useLayoutEffect 是 React 提供的一个 Hook，用于在 DOM 更新之后同步执行副作用。它的执行时机是在浏览器绘制之前，因此适合用于需要直接操作 DOM 或测量 DOM 元素尺寸的场景。

用法

1. 与 useEffect 的区别：

   • useEffect 是在浏览器绘制之后异步执行的，而 useLayoutEffect 是在浏览器绘制之前同步执行的。
   • 由于 useLayoutEffect 是同步执行的，因此如果副作用操作耗时较长，可能会导致页面卡顿。

2. 适用场景：

   • 当你需要在 DOM 更新后立即读取或修改 DOM 元素的属性时，例如获取元素的尺寸、位置等。
   • 当你需要在 DOM 更新后立即执行某些操作，而这些操作需要在用户看到页面之前完成。

3. 注意事项：

   • 由于 useLayoutEffect 是同步执行的，因此应尽量避免在其中执行耗时较长的操作，以免影响页面性能。
   • 如果不需要在浏览器绘制之前执行副作用，建议使用 useEffect 代替 useLayoutEffect。

示例代码

// www.javascriptcn.com code example
import React, { useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef(null);

  useLayoutEffect(() => {
    const { width, height } = ref.current.getBoundingClientRect();
    console.log(`Element size: ${width}x${height}`);
  }, []);

  return <div ref={ref}>Measure me!</div>;
}

在这个示例中，useLayoutEffect 用于在 DOM 更新后立即获取元素的尺寸，并打印到控制台。