react useEffect 如何理解？

## 一、`useEffect` 是什么？ `useEffect` 是 React 中的一个 **Hook**，用于在**函数组件**中处理**副作用**。 ### 那什么是副作用（side effect）？ 副作用指的是**不直接产生 UI 输出**，但对组件行为或外部环境有影响的操作，例如： - 发请求、数据获取 - 设置订阅、定时器 - 操作 DOM - 同步状态、写入 localStorage - 清除资源（解绑、清除定时器） 在类组件中你会在 `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` 中处理副作用，而在函数组件中，全靠 `useEffect`。 ## 二、`useEffect` 的语法 ```tsx useEffect(() => { // 1. 这里写副作用逻辑（数据请求、定时器、状态同步等） return () => { // 2. 可选：清理函数（在组件卸载或依赖变化前执行） } }, [依赖项]) ``` ## 三、`useEffect` 是怎么运行的？ 依赖项 | 含义 | 运行时机 -------|------|------------ `[]` 空数组 | 只在**组件第一次挂载时运行一次** | 等价于 `componentDidMount` 无依赖项 | 每次组件渲染后都运行 | **每次更新都执行** `[a, b]` 指定依赖 | **只有 a 或 b 变化时才执行** | 等价于 `componentDidUpdate` ## 四、核心场景举例 ### 1）组件挂载后发送请求 ```tsx useEffect(() => { fetch('/api/data') .then(res => res.json()) .then(data => setData(data)) }, []) // 空数组 -> 只执行一次 ``` ### 2）监听某个变量变化并做操作 ```tsx useEffect(() => { console.log('count 变了', count) }, [count]) // 只有当 count 变化时才执行 ``` ### 3）设置定时器并在组件卸载时清除 ```tsx useEffect(() => { const timer = setInterval(() => { console.log('定时执行') }, 1000) // 清理逻辑（组件卸载或 effect 重跑前执行） return () => { clearInterval(timer) console.log('清理定时器') } }, []) // 只在挂载时执行一次 ``` ### 4）组件卸载时执行清理逻辑 ```tsx useEffect(() => { window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) } }, []) ``` ## 五、你提到的例子详解 ```tsx useEffect(() => { setInnerValue(value) }, [value]) ``` 意思是：每当外部传入的 `value` 变化时，我们就更新内部的 `innerValue`。常用于同步父子组件的状态。 ## 六、常见误区 | ❌ 错误写法 | ✅ 正确写法 | 原因 | |------------|-------------|-------| | 把副作用写在组件体内 | 放在 `useEffect` 里 | 否则副作用会在每次 render 中重复执行 | | 忘记依赖项 | 加上 `[xxx]` | 否则副作用执行不准确或死循环 | | 忘记清理副作用 | 使用 `return () => {}` | 否则会内存泄露、重复绑定 | ## 总结一句话： > `useEffect` 是 React 函数组件中用于处理副作用的 Hook，它会在组件挂载、更新、卸载等生命周期时机触发，可以做数据请求、状态同步、订阅管理、资源清理等操作。