原有核心题

1. props、state 和渲染有什么关系？

展开答案与追问

参考答案： props 由父级传入，state 由组件保存；渲染根据当前输入生成 UI 描述。每次渲染看到固定的状态快照，事件回调捕获该次渲染的值。更新依赖前值时用 setCount(c => c + 1)。

追问与易错点： 状态快照

2. 为什么列表需要稳定 key？

展开答案与追问

参考答案： key 帮助 React 区分同级子节点身份，从而复用合适的实例与状态。增删重排列表应使用稳定业务 ID；索引可能让输入状态对应错行，随机 key 则会导致反复重建。

追问与易错点： key 只需在同级唯一；子组件不会通过 props.key 直接拿到它。

3. useEffect 应该做什么？

展开答案与追问

参考答案： Effect 用于同步外部系统，如订阅或连接。依赖变化时先清理旧 Effect，再运行新设置；卸载也清理。依赖须覆盖使用的响应式值；纯计算优先在渲染中完成。开发 Strict Mode 可能额外执行设置与清理以暴露问题。

追问与易错点： useEffect 官方参考

4. useRef 与 useState 的区别？

展开答案与追问

参考答案： state 更新会安排渲染，ref 保存跨渲染的可变值但修改 current 不触发渲染。ref 适合 DOM 引用、计时器 ID 等；影响展示的值通常应放 state。避免在渲染过程中随意读写 ref 来驱动 UI。

追问与易错点： 异步回调读到旧 state 是闭包快照问题，可按需求使用函数式更新或正确同步最新引用。

5. useMemo、useCallback 和 memo 有何作用？

展开答案与追问

参考答案： useMemo 缓存计算结果，useCallback 缓存函数引用，memo 在 props 满足比较条件时可能跳过组件渲染。它们是性能工具，先测量再使用；不稳定对象 props 会破坏浅比较收益。

追问与易错点： memo 不能阻止自身 state 或所消费 context 更新引发的渲染，也不应作为正确性保证。

6. 为什么 Hooks 通常不能放进条件分支？

展开答案与追问

参考答案： useState、useEffect 等依赖稳定的调用顺序关联内部状态，因此应在函数组件或自定义 Hook 顶层调用。条件逻辑可以放在 Effect 内部，或拆分成组件。使用 lint 规则检查。

追问与易错点： React 的 use API 有不同调用规则，不能把“所有名字以 use 开头的 API”一概而论。

7. 受控与非受控表单是什么？

展开答案与追问

参考答案： 受控输入由 value/checked 和状态更新驱动，便于校验与联动；非受控输入由 DOM 保存当前值，使用 defaultValue 和 ref 等读取。选择取决于表单复杂度与工具体系。

追问与易错点： 不要在同一输入生命周期中无意从 undefined 的非受控状态切换成受控。

8. 组件状态如何组织？

展开答案与追问

参考答案： 优先保持状态靠近使用者，多个组件共享时提升到共同祖先。跨层低频配置可用 Context，复杂共享状态可引入专用方案。服务端数据应考虑缓存、失效、重试与去重，避免全部当普通全局变量管理。

追问与易错点： 拆分 Context 与稳定 provider 值可减少无关更新；优化前先用 Profiler 定位。