第3章 React Hooks与状态管理：useState、useEffect、useContext、useReducer常见问题与闭包陷阱

面试问题：为什么在 useState 的异步回调中获取到的状态是旧值？如何解决？

面试官考察点：

• 是否理解闭包捕获时机
• 是否区分同步与异步更新
• 能否给出多种解决思路

回答框架：

1. 点明闭包捕获了组件本次渲染时的状态快照。
2. 指出异步回调（如 setTimeout、Promise）会在未来执行，此时状态值不变。
3. 提供三种解法：使用函数式更新 setCount(c => c + 1)、使用 useRef 保存最新值、将状态作为依赖传入 useEffect。

简短示例回答：

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setTimeout(() => {
      setCount(count + 1); // 闭包捕获 count=0
    }, 1000);
  }, []);
  // 改进：setCount(c => c + 1) 或 useRef
}

可能追问：

• 函数式更新 (prev => prev + 1) 为什么能拿到最新值？
• useRef 保存值的原理是什么？
• 如果在 useEffect 中使用多个状态，如何避免依赖膨胀？

面试问题：useEffect 的依赖数组怎么导致无限循环？怎么排查和修复？

面试官考察点：

• 是否理解依赖数组的比较机制（Object.is）
• 是否遇到过引用类型作为依赖的坑
• 能否讲出 useEffect 的清除策略

回答框架：

1. 指出每次渲染生成新函数/对象时，依赖发生变化 → 触发再执行。
2. 排查步骤：注释依赖看效果 → 检查是否使用内联箭头函数或类似 {} 的对象。
3. 修复：useCallback/useMemo 稳定引用、拆分 useEffect、或使用 ref 绕过。

简短示例回答：

useEffect(() => {
  fetchData(url);
}, [url]); // 如果 url 每次创建新对象 → 无限循环
// 修复：const urlRef = useRef(url); 依赖 []

可能追问：

• React 内部如何比较依赖（Object.is vs 浅比较）？
• 在 React 18 严格模式下，为什么 useEffect 会执行两次？
• useEffect 的清除函数在何时被调用？

面试问题：使用 useContext 时，如何避免不必要的子组件重新渲染？

面试官考察点：

• 是否理解 Context 的传播粒度
• 能否提出性能优化方案（拆分、useMemo、React.memo）
• 是否知道 useReducer 搭配 Context 的优势

回答框架：

1. 指出 Context 本身是发布-订阅模式，任意值变化会通知所有消费者。
2. 优化一：拆分多个 Context，按业务或频率隔离。
3. 优化二：将对象通过 useMemo 包装，避免每次渲染新建引用。
4. 优化三：使用 React.memo 包装只读组件，配合 useMemo 传递的稳定值。

简短示例回答：

const ThemeContext = createContext();
const theme = useMemo(() => ({ color: 'blue' }), []);
<ThemeContext.Provider value={theme}>...</ThemeContext.Provider>

可能追问：

• useReducer + Context 如何模拟 Redux？
• 为什么 Context 不适合频繁更新的数据？
• Jotai / Zustand 等第三方库如何解决 Context 性能问题？