【React】Hook

useEffect：

- 异步，不影响渲染速度

- 渲染后执行

useLayoutEffect：

- 同步，影响渲染速度

- 渲染前执行

浏览器渲染过程

1. 构建 DOM 树：解析 HTML，构建出 DOM 树。

2. 构建 CSSOM 树：解析 CSS，构建出 CSSOM 树（CSS Object Model）。

3. 合并 DOM 树和 CSSOM 树，生成 Render 树：将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree），这个树包含了页面中需要渲染的所有元素及其样式。

4. 布局（Layout/Reflow）：根据 Render 树计算每个元素在页面中的几何位置（大小、位置等），并确定页面中每个元素的布局。

5. 绘制（Painting）：根据布局信息将页面上的每个元素绘制到屏幕上。