HOW - React 如何在在浏览器绘制之前同步执行 - useLayoutEffect

useEffect vs useLayoutEffect

useLayoutEffect 和 useEffect 都是 React Hooks 中用于处理副作用的钩子，但它们在执行时机和用途上有一些关键区别。

理解这些区别有助于在不同的场景下选择合适的钩子来优化组件的性能和用户体验。

useEffect

• 执行时机：

  • useEffect 的回调函数会在浏览器完成渲染之后异步执行。这意味着它不会阻塞浏览器的绘制过程。

• 用途：

  • 适用于大多数副作用操作，如数据获取、订阅、手动操作 DOM（例如添加事件监听器）、设置定时器等。
  • 因为它在渲染后异步执行，所以不会导致用户界面的阻塞，适合处理不影响当前渲染结果的副作用。

• 示例：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 这里的代码会在组件渲染到屏幕后异步执行
    console.log('useEffect 执行');

    return () => {
      // 清理函数
      console.log('useEffect 清理');
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return <div>Hello World</div>;
}

useLayoutEffect

• 执行时机：

  • useLayoutEffect 的回调函数会在 DOM 更新完成后、浏览器进行绘制之前同步执行。这意味着它会阻塞浏览器的绘制过程，直到回调函数执行完毕。

• 用途：

  • 适用于需要在浏览器绘制之前同步执行的操作，如测量 DOM 元素的尺寸、位置，或者进行需要同步更新样式的操作。
  • 由于它会阻塞渲染，应谨慎使用，避免在高频率更新的场景下使用，以免影响性能。

• 示例：

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

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

  useLayoutEffect(() => {
    // 在浏览器绘制之前同步获取 DOM 元素的宽度
    if (divRef.current) {
      const { width } = divRef.current.getBoundingClientRect();
      setWidth(width);
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '50%', border: '1px solid black' }}>
        测量宽度
      </div>
      <p>宽度: {width}px</p>
    </div>
  );
}

主要区别总结

特性	useEffect	useLayoutEffect
执行时机	渲染后异步执行	渲染后、绘制前同步执行
阻塞渲染	不阻塞	阻塞
适用场景	大多数副作用操作，如数据获取、订阅等	需要同步操作 DOM 或测量布局的场景
性能影响	较低，适合频繁使用的副作用	高，需谨慎使用以避免阻塞渲染

选择建议

• 优先使用 useEffect：在大多数情况下，useEffect 足以满足需求，并且由于其异步执行的特性，不会影响用户界面的渲染性能。

• 必要时使用 useLayoutEffect：只有在确实需要在浏览器绘制之前同步执行某些操作时，才使用 useLayoutEffect。例如，调整布局、测量元素尺寸等。

注意事项

• 避免过度使用 useLayoutEffect：由于其会阻塞渲染，频繁或不当使用可能导致页面卡顿或响应缓慢。

• 清理函数：与 useEffect 一样，useLayoutEffect 也支持返回一个清理函数，用于在组件卸载或依赖项变化时执行清理操作。

通过理解 useEffect 和 useLayoutEffect 的区别，可以更有效地管理组件的副作用，优化性能，并提升用户体验。

useLayoutEffect 使用示例

测量 DOM 元素的尺寸和位置

在某些情况下，你需要精确知道某个 DOM 元素的实际尺寸（宽度、高度）或在页面中的位置信息，以便根据这些信息进行后续的操作，而这些操作必须在浏览器绘制之前完成，否则可能会导致测量的不准确。

示例：自适应弹出框定位

当你有一个弹出框，需要根据触发它的元素的相对位置来动态定位时，就需要先测量触发元素的尺寸和位置，然后根据这些信息计算出弹出框的合适位置。

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

const PopupExample = () => {
    const triggerRef = useRef(null);
    const popupRef = useRef(null);
    const [position, setPosition] = useState({ top: 0, left: 0 });

    useLayoutEffect(() => {
        if (triggerRef.current && popupRef.current) {
            const triggerRect = triggerRef.current.getBoundingClientRect();
            // 简单示例，将弹出框定位在触发元素的下方
            const newTop = triggerRect.bottom + window.scrollY;
            const newLeft = triggerRect.left + window.scrollX;

            setPosition({ top: newTop, left: newLeft });
        }
    }, []);

    return (
        <div>
            <button ref={triggerRef}>点击显示弹出框</button>
            <div ref={popupRef} style={{ position: 'absolute', top: position.top, left: position.left }}>
                这是一个弹出框
            </div>
        </div>
    );
};

export default PopupExample;

在上述代码中，useLayoutEffect 会在浏览器绘制之前同步执行，确保能够准确获取触发元素的尺寸和位置信息，从而正确地定位弹出框。

同步更新样式以避免闪烁

有时候，你需要根据某些计算结果立即更新元素的样式，而且希望这些更新在浏览器绘制之前完成，以避免出现样式闪烁的问题。

示例：根据内容动态调整容器高度

当容器内的内容动态变化时，你可能希望容器的高度能够立即适应内容的变化，而不让用户看到内容先溢出再调整高度的过程。

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

const DynamicHeightContainer = () => {
    const containerRef = useRef(null);
    const [content, setContent] = useState('初始内容');

    const toggleContent = () => {
        setContent(prevContent => prevContent === '初始内容' ? '这是一段更长更长的内容，用于测试容器高度的动态调整。' : '初始内容');
    };

    useLayoutEffect(() => {
        if (containerRef.current) {
            // 这里可以根据内容做一些样式调整，例如设置高度
            // 示例中简单打印信息，实际应用中可根据需求修改样式
            console.log('根据内容调整容器样式');
        }
    }, [content]);

    return (
        <div>
            <button onClick={toggleContent}>切换内容</button>
            <div ref={containerRef} style={{ border: '1px solid black' }}>
                {content}
            </div>
        </div>
    );
};

export default DynamicHeightContainer;

在这个例子中，useLayoutEffect 确保在浏览器绘制之前根据内容的变化同步更新容器的样式，避免了内容溢出或高度闪烁的问题。

图像或 Canvas 绘制前的准备工作

在进行图像处理或使用 Canvas 进行绘图时，有时需要在绘制之前获取一些必要的信息或进行一些预处理操作，这些操作也需要在浏览器绘制之前完成。

示例：Canvas 绘制自定义图形

在使用 Canvas 绘制复杂图形时，可能需要先测量某些元素的位置或尺寸，然后根据这些信息进行绘制。

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

const CanvasDrawing = () => {
    const canvasRef = useRef(null);

    useLayoutEffect(() => {
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');

        // 假设这里需要根据某个 DOM 元素的位置来绘制图形
        // 先进行相关测量等准备工作（此处简化）

        // 开始绘制
        ctx.fillStyle = 'red';
        ctx.fillRect(10, 10, 50, 50);
    }, []);

    return <canvas ref={canvasRef} width="200" height="200"></canvas>;
};

export default CanvasDrawing;

在上述代码中，useLayoutEffect 可以确保在进行 Canvas 绘制之前完成所有必要的准备工作，保证绘制的准确性和流畅性 。