useLayoutEffect

类似 useEffect，但它会在组件渲染完成之后，浏览器布局和绘制之前同步执行，而 useEffect 是异步执行。

因此 useLayoutEffect 的执行顺序会在 useEffect 之前。

由于同步执行的特性，如果 useLayoutEffect 中的操作比较耗时，可能会导致页面渲染和响应的性能问题。

index.tsx

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

function MyApp() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化时获取宽度

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Window Width: {width}</div>;
}

export default MyApp;