React 面试题：Hooks 深入解析

1. Hooks 设计目标是什么？

• 让函数组件也能使用状态和副作用。
• 解决类组件逻辑复用困难的问题。
• 通过组合函数实现更清晰的状态管理。

2. 为什么不能在循环或条件中调用 Hooks？

• Hooks 依赖调用顺序。
• 变动调用顺序会破坏内部状态映射。
• 只能在顶层或自定义 Hook 中使用。

3. useEffect 的依赖数组如何正确填写？

• 应该包含所有外部引用的变量。
• 缺少依赖会导致 stale closure。
• 过多依赖会导致重复执行。

4. useLayoutEffect 与 useEffect 有何区别？

• useLayoutEffect 在 DOM 更新后、浏览器绘制前同步执行。
• useEffect 异步延后执行，不阻塞绘制。
• 只有当需要读取布局或同步 DOM 变更时使用 useLayoutEffect。

5. useRef 的用途有哪些？

• 保存 DOM 引用。
• 持久化可变值而不触发重渲染。
• 用于记录前一次值或防抖定时器 ID。

6. 如何避免 Hook 依赖与性能问题？

• 使用 useMemo 和 useCallback 缓存值与函数。
• 避免在 render 中创建新对象。
• 关注是否有不必要的子组件重新渲染。

7. 你如何设计可复用的自定义 Hook？

• 封装状态逻辑和副作用。
• 接收参数并返回状态与操作接口。
• 保持 API 简单、职责单一。

8. Hooks 与类组件有哪些性能差异？

• Hooks 函数组件可组合性更好。
• 类组件的生命周期更难以复用。
• 渲染次数与性能差异主要来自渲染逻辑本身，而非 Hooks 机制。