依赖数组
依赖数组是 useEffect 的“说明书”，决定何时重跑：[] 只在挂载后跑一次；[count] 在 count 变化时重跑；不传则每次渲染都跑。粗心漏写依赖是最常见的 React bug 来源。
取数请求通常只想发一次：写 useEffect(() => {...}, [])。如果 effect 里用到了外部变量，就必须写进依赖——配合 ESLint 的 exhaustive-deps 规则可以自动检查。
- []：挂载后只跑一次（发请求、加监听的常用写法）
- [a, b]：a 或 b 变化才重跑；不传 = 每次渲染都跑
- 依赖要写全：漏写会让 effect 用到旧的闭包变量
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>依赖数组</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState, useEffect } = React; function App() { const [count, setCount] = useState(0); const [tip, setTip] = useState('等待中'); // 挂载后只跑一次：模拟首次请求 useEffect(() => { const timer = setTimeout(() => setTip('初始数据加载完成'), 500); return () => clearTimeout(timer); // 见下一节：清理函数 }, []); // count 变化才重跑 useEffect(() => { console.log('count 变成了', count); }, [count]); // 不写依赖：每次渲染后都执行 useEffect(() => { // console.log('我又跑了'); }); return ( <div style={{ padding: 16 }}> <p>{tip}</p> <p>count = {count}（观察控制台：只有它变化时才打印）</p> <button onClick={() => setCount(count + 1)}>+1</button> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />); </script> </body> </html>
本节要点依赖数组控制重跑时机：[] 只跑一次，[x] 看 x 变化；漏写依赖 = 旧闭包 bug。
