useEffect和useLayoutEffect有什么区别

useEffect 和 useLayoutEffect 是 React 中的两个 Hook，它们都用于处理副作用，但是在执行时机和使用场景上有所不同。以下是它们的主要区别：

1. 执行时机

useEffect:
    在组件渲染后执行，且在浏览器绘制后进行。
    适合用于处理不影响布局的副作用，比如数据获取、事件监听等。

useLayoutEffect:
    在浏览器绘制之前执行。
    适合用于需要直接读取 DOM 布局并同步触发重渲染的副作用，比如测量 DOM 元素的尺寸或位置。

2. 性能影响

useEffect:
    不会阻塞浏览器绘制，因此对用户体验的影响较小。

useLayoutEffect:
    由于会阻塞浏览器绘制，可能导致性能问题，尤其是当副作用较重时。

3. 使用场景

useEffect：
    数据获取
    订阅事件
    清理定时器

useLayoutEffect：
    读取和同步 DOM 布局
    动画效果的测量
    需要在浏览器绘制前更新状态的场景

示例

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

function Example() {
    useEffect(() => {
        console.log('useEffect: This runs after rendering.');
    }, []);

    useLayoutEffect(() => {
        console.log('useLayoutEffect: This runs before rendering.');
    }, []);

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

总结

使用 useEffect 处理大多数副作用。
使用 useLayoutEffect 处理需要同步的、影响布局的副作用。一般情况下，优先使用 useEffect，只有在确实需要时再使用 useLayoutEffect。