useLayoutEffect和useEffect有什么作用？

React核心钩子：useEffect与useLayoutEffect深度解析（区别+场景+实战）

在React函数式组件中，useEffect和useLayoutEffect是处理副作用的核心钩子。二者功能一致——均用于执行数据请求、DOM操作、事件订阅等非渲染逻辑，但执行时机、阻塞特性、适用场景差异显著。本文从核心区别、执行机制、实战案例三个维度，帮你精准区分并灵活运用。

一、核心概念：什么是“副作用”？

React组件的核心职责是“根据props/state渲染UI”（纯函数逻辑），而副作用指组件渲染之外的额外操作，常见场景：

• 数据获取（接口请求、本地存储读写）；
• DOM操作（修改元素样式、获取DOM尺寸）；
• 事件订阅/取消订阅（如定时器、WebSocket连接）；
• 第三方库初始化（如图表库、地图SDK）。

useEffect和useLayoutEffect的核心作用，是将副作用与组件渲染逻辑解耦，确保组件纯渲染、副作用可控制。

二、useEffect与useLayoutEffect的核心区别

二者的核心差异集中在执行时机和阻塞特性