Hooks

Hook 是 React 16.8 引入的一类特殊函数，命名以 use 开头。它让函数组件拥有了原本只有类组件才有的能力：状态管理、生命周期、跨组件共享逻辑。 为什么需要 Hook React 16.8 之前，函数组件只能做纯渲染，没有状态、没有生命周期。要用这些功能必须写类组件，但类组件存在几个痛点： this 绑定容易出错 生命周期方法（componentDidMount / componentDidUpdate）把不相关的逻辑强行塞在一起 状态逻辑难以在组件之间复用 Hook 彻底解决了这些问题，现代 React 项目基本全面使用函数组件 + Hook。 Hook 使用规则 这两条规则必须严格遵守，否则会导致 Bug。 只在函数组件或自定义 Hook 的顶层调用 Hook，不能在条件语句、循环、嵌套函数中调用 只在 React 函数中调用 Hook，不能在普通 JS 函数中调用 // ❌ 错误：在条件语句中调用 if (condition) { const [value, setValue] = useState(0); } // ✅ 正确：在顶层调用 const [value, setValue] = useState(0); if (condition) { setValue(1); } 内置 Hook useState 管理组件的局部状态。 const [state, setState] = useState(initialValue); state：当前状态值 setState：更新状态的函数，调用后触发重渲染 initialValue：初始值，也可以传入一个函数（懒初始化） import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>计数：{count}</p> <button onClick={() => setCount(count + 1)}>+1</button> <button onClick={() => setCount(prev => prev - 1)}>-1</button> </div> ); } 函数式更新：当新状态依赖上一个状态时，推荐传函数给 setState，避免闭包陷阱： ...