Custom Hooks 自定义 Hook
最后更新：2026-10-28
Custom Hooks 自定义 Hook
自定义 Hook 是名字以 use 开头的普通函数，内部可以调用其他 Hook，把有状态的逻辑（请求、防抖、持久化、开关）抽成可复用单元。每次调用各自拥有独立的 state——复用的是逻辑，不是状态本身。
| 分组 | 组件模式 |
|---|---|
| 类型 | Hook |
| 引入版本 | React 16.8 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// 命名必须以 use 开头，ESLint 才能检查 Hook 规则
function useToggle(initial = false) {
const [on, setOn] = useState(initial)
const toggle = () => setOn(v => !v)
return [on, toggle] // 返回值随意：数组或对象
}返回值：无固定签名，由你定义。惯例返回 [值, 操作函数] 二元组，或对象形式的方法集合。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
两个按钮各自独立开关——Lamp 和 Fan 各自持有一份互不干扰的 on 状态，却共用同一套 useToggle 逻辑。💡 要点
💡 提示 两个组件调用同一个自定义 Hook，state 完全独立——Hook 复用逻辑，不共享状态。
ℹ️ 说明 需要共享状态时请提升状态或放进 Context；自定义 Hook 内部照样可以组合 useState/useEffect。
⚠️ 注意 只能在组件或其他 Hook 的顶层调用，不能放进 if / 循环 / 普通函数——与所有 Hook 同一套规则。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 自定义 Hook 里的 state 是共享的吗？
A 不共享。每次调用都会创建独立的一份 state，类似「逻辑的函数式继承」而不是单例。
Q 返回数组还是对象？
A 两三个值且语义清楚时返回数组方便解构重命名；方法多或要扩展时返回对象可读性更好。
Q 名字必须以 use 开头吗？
A 强烈建议：这是 React 与 ESLint 识别 Hook、检查调用规则的约定，违规则 Hook 规则检查全部失效。
