React Hooks 的 useEffect 完整生命周期与依赖数组精确控制原理 描述 useEffect 是 React Hooks 中处理副作用的核心 API，它模拟了类组件的生命周期（componentDidMount、componentDidUpdate、componentWillUnmount），但通过依赖数组实现了更精确的副作用控制。理解其执行时机、清理机制和依赖数组的比对规则对避免无限循环和内存泄漏至关重要。 解题过程 基础执行流程 组件渲染完成后，React 会安排一个异步任务执行 useEffect。 首次渲染时，执行传入的副作用函数（对应 componentDidMount）。 若依赖数组非空，当依赖值变化时，会先执行上一次的清理函数（若存在），再运行新的副作用（对应 componentDidUpdate）。 组件卸载时，执行清理函数（对应 componentWillUnmount）。 依赖数组的精确控制 空数组 [] ：副作用仅在挂载后执行一次，清理函数在卸载时执行。 无依赖数组 ：每次渲染后都会执行副作用和清理，易导致性能问题或无限循环。 依赖项数组 [a, b] ：React 使用 Object.is 比对依赖项的前后值。若变化，则重新执行副作用。 清理函数的执行机制 清理函数（return 的函数）会在两种时机执行： 依赖变化时 ：重新执行副作用前，先清理上一次的副作用。 组件卸载时 ：直接执行清理函数。 示例：若副作用订阅了事件，清理函数需取消订阅以避免内存泄漏。 依赖项比对的黑盒逻辑 React 使用 Object.is （类似 === ，但处理了 NaN 和 ±0 ）进行依赖值的严格比对。 对象类型陷阱 ：若依赖项是对象或函数，每次渲染会创建新引用，导致不必要的重执行。需通过 useMemo / useCallback 缓存。 异步调度与闭包陷阱 useEffect 的副作用是异步调度的，执行时可能已经历多次渲染。 副作用函数会捕获定义时的状态闭包。若需最新值，需结合 useRef 或依赖项声明。 与 useLayoutEffect 的差异 useLayoutEffect 的副作用在 DOM 更新后、浏览器绘制前同步执行，适用于需直接操作 DOM 的场景。 useEffect 的异步特性可避免阻塞渲染，适合数据请求等非紧急任务。 总结 useEffect 通过依赖数组的精细控制，将副作用的执行与组件状态变化解耦。正确声明依赖项、理解清理时机和闭包特性，可避免常见陷阱，实现高效可维护的副作用逻辑。