React 中，useEffect 和 useLayoutEffect 都是用于处理副作用的 Hook。它们都会在组件渲染完毕之后执行

一：区别

1：执行时机不同

useLayoutEffect =>会在组件渲染之后、浏览器 layout 和 paint 之前执行，

useEffect =>在组件渲染之后、浏览器 layout 和 paint 之后执行

2：影响渲染性能的程度不同

useLayoutEffect=> 可能会对组件的渲染性能产生影响，会阻塞

useEffect=> 则不会对组件的渲染性能产生影响

3：适用场景不同

useLayoutEffect=>更适合用于需要同步更新 DOM 的场景，如位置大小等

useEffect=> 更适合用于不需要同步更新 DOM 的场景，如网络请求，数据状态等

二：代码演示

1：useEffect

useEffect(() => {
    console.log('useEffect');
    document.title = `Count: ${count}`;
  }, [count]);

2：useLayoutEffect

useLayoutEffect(() => {
    console.log('useLayoutEffect');
    const handleResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

三：总结

1：组件渲染完成后立即执行某些操作，并且这些操作可能会影响组件的渲染结果，则使用 useLayoutEffect；否则，应该使用 useEffect

2：useEffect 和 useLayoutEffect 的执行顺序不能保证。在同一个组件中使用，它们可能会交错执行

3：useEffect 和 useLayoutEffect 的第二个参数（依赖项）可以控制 执行时机。当依赖项变化时，Hook 会重新执行。如果依赖项为空数组，那么  只在组件渲染时执行一次

4：使用 useLayoutEffect 时，需要注意它可能会对组件的性能（阻塞）产生影响。应该尽可能地减少使用它的次数，只在必要的情况下使用