一、这个技术是什么？

函数组件代码清晰，但函数每次重新执行时，普通变量不会自动保留；同时，网络请求、事件监听等副作用也需要被管理。

Hooks 解决了两个问题：让函数组件拥有状态，以及让状态相关逻辑可以被复用和组合。

二、没有它之前发生了什么？

函数组件只能接收输入并返回 UI
↓
有状态逻辑依赖 class 组件
↓
复用逻辑需要高阶组件或 Render Props
↓
嵌套结构复杂、逻辑分散
↓
Hooks 让状态和副作用逻辑回到函数中

三、核心概念

1. useState

useState 让组件保存会变化的数据，并提供更新函数。

2. useEffect

useEffect 用于处理与渲染不同步的副作用，例如请求、订阅和 DOM API。它不是所有逻辑的默认容器。

3. 依赖数组

依赖数组告诉 React：副作用依赖哪些值。依赖不完整可能读到旧数据，依赖过多可能造成重复执行。

4. 自定义 Hook

自定义 Hook 把多个组件都会用到的状态逻辑封装成可复用函数。

5. Hook 调用规则

Hook 通常只能在组件或自定义 Hook 的顶层调用，不能放进条件、循环或普通函数中。

四、运行流程

五、面试复习

一句话回答

Hooks 让函数组件能够使用状态和副作用，并通过自定义 Hook 复用状态逻辑；它依赖稳定的调用顺序来保持状态对应关系。

高频追问

• useEffect 什么时候执行？
• 为什么不能在 if 里调用 Hook？
• useMemo 和 useCallback 解决什么问题？
• 如何避免 Effect 无限循环？

容易答错

不要把 useEffect 当成“组件生命周期替代品”或“所有异步代码的地方”。应先判断逻辑是否真的与外部系统同步。

六、项目展示

可以为知识库搜索封装 useKnowledgeSearch，为收藏功能封装 useBookmarks。面试时展示：哪些逻辑被复用、依赖如何控制、如何避免组件互相耦合。