React Hooks 系列：useLayoutEffect 的解析笔记

useLayoutEffect 是 React 提供的一个 Hook，与 useEffect 类似，但它在 DOM 更新后同步执行，适用于需要在浏览器绘制前完成的操作。以下是 useLayoutEffect 的详细用法：

1. 基本用法

useLayoutEffect 的签名与 useEffect 相同，接受两个参数：

• 一个副作用函数。
• 一个依赖数组（可选）。

useLayoutEffect(() => {
  // 副作用逻辑
}, [dependencies]);

2. 执行时机

• useEffect：在浏览器完成绘制后异步执行。
• useLayoutEffect：在 DOM 更新后、浏览器绘制前同步执行。

3. 适用场景

• DOM 测量：需要在 DOM 更新后立即获取元素的尺寸或位置。
• 同步更新：需要在浏览器绘制前同步更新 DOM。

4. 示例

示例 1：DOM 测量

import React, { useLayoutEffect, useRef, useState } from 'react';

function Component() {
  const [width, setWidth] = useState(0);
  const ref = useRef(null);

  useLayoutEffect(() => {
    if (ref.current) {
      setWidth(ref.current.offsetWidth);
    }
  }, []);

  return (
    <div ref={ref}>
      <p>Width: {width}px</p>
    </div>
  );
}

示例 2：同步更新

import React, { useLayoutEffect, useState } from 'react';

function Component() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    if (count === 0) {
      setCount(10);
    }
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

5. 注意事项

• 性能影响：useLayoutEffect 是同步执行的，可能会阻塞浏览器渲染，应避免在复杂逻辑中使用。
• 服务端渲染：在服务端渲染时，useLayoutEffect 会导致警告，建议使用 useEffect 替代。

6. 总结

• useLayoutEffect：适用于需要在 DOM 更新后立即执行的同步操作。
• useEffect：适用于大多数异步副作用操作。