基础 API 与生命周期

9. JSX、React Element、组件和 Fiber 是什么关系？

展开答案与追问

参考答案： JSX 是描述 UI 的语法，编译后形成元素创建调用；React Element 是描述类型、props、key 等的普通对象。组件负责根据输入返回 UI 描述，Fiber 是 React 运行时保存组件工作、状态和关系的数据结构。一个元素描述不等于一个真实 DOM 节点，函数组件也没有对应的包裹 DOM。

追问与易错点： 追问：JSX 不会直接生成并插入 DOM，创建 Element 与提交 DOM 是不同步骤。

10. useState 的初始化、批处理和不可变更新怎么答？

展开答案与追问

参考答案： 初始值只用于初始化，昂贵计算可传惰性初始化函数。setter 安排更新，当前闭包里的变量不会随调用立即改变。依赖旧值用函数式更新；对象与数组创建新引用，避免直接修改旧状态。React 18 的 createRoot 提供更广泛的自动批处理，但不能把所有不同时刻的事件都当成一次更新。

追问与易错点： 追问：开发 Strict Mode 可能额外调用初始化函数和 updater 检查纯度，所以其中不能发请求或修改外部数据。

11. useReducer 何时比多个 useState 更合适？

展开答案与追问

参考答案： 当状态转换复杂、多个字段必须一起变化时，可用 reducer(state, action) 集中表达规则。dispatch 描述发生的事件，reducer 纯计算下一状态。它方便独立验证业务转换，但不会自动提升性能或自动成为全局状态管理。

追问与易错点： 例：表单从 idle 到 submitting，再到 success/error；不要在 reducer 内请求接口。

12. Context 与 useContext 能解决什么？

展开答案与追问

参考答案： Context 让后代读取最近 Provider 的值，适合主题、语言和共享依赖。消费者会响应所读 Context 值的变化，memo 不能阻止这种更新。高频大对象状态需要考虑拆分上下文、稳定引用或选择性订阅方案。

追问与易错点： 追问：Context 传的是一条依赖通道，不自带持久化、服务端缓存和细粒度选择器。

13. useEffect、useLayoutEffect、useInsertionEffect 如何区分？

展开答案与追问

参考答案： useEffect 用于同步外部系统，其执行不能保证总在浏览器绘制之后；交互触发时可能提前。useLayoutEffect 在提交后的布局阶段、浏览器重绘前运行，可测量并校正布局，但会阻塞绘制。useInsertionEffect 主要供 CSS-in-JS 库插入样式，业务代码通常不需要。

追问与易错点： 来源：Hooks API。不要把 Effect 精确等价为某个旧生命周期。

14. Effect 的三种依赖写法有什么区别？

展开答案与追问

参考答案： 不传依赖：每次相关提交后运行；空数组：不随组件的响应式值变化重跑，但重新挂载会运行；有依赖数组：依赖按 Object.is 比较变化时重跑。清理先于同一 Effect 的下一次设置，卸载时也清理。依赖应由代码实际读取决定。

追问与易错点： 追问：开发检查下 [] 不代表“整个应用绝对只执行一次”；不要用关闭 lint 来压制陈旧闭包。

15. 类组件生命周期如何与 Hooks 对照？

展开答案与追问

参考答案： render 应纯计算；componentDidMount/componentDidUpdate 常处理提交后的同步工作，componentWillUnmount 清理外部资源。函数组件通常用 Effect 的设置/清理表达同一外部同步过程，用 useLayoutEffect 处理绘制前测量；不是一对一机械翻译。

追问与易错点： getSnapshotBeforeUpdate 用于 DOM 更新前读取滚动等信息，componentDidUpdate 获取快照；UNSAFE_ 旧生命周期不适合新代码。类组件参考

16. 挂载、更新、卸载分别发生什么？

展开答案与追问

参考答案： 挂载时 React 渲染组件、协调子树并提交宿主节点；更新时处理待更新状态、重新计算所需子树并提交差异；卸载时移除子树，清理相关副作用。函数体执行属于 render，并不保证随后一定 commit。

追问与易错点： 追问：请求、订阅和直接 DOM 修改不能随意放入组件函数体，否则重试或废弃渲染也会造成副作用。

17. 如何通过 ref 暴露子组件能力？

展开答案与追问

参考答案： DOM ref 在提交时连接节点；useImperativeHandle 可只暴露 focus、reset 等必要方法。React 18 及更早的常见写法通过 forwardRef 接收 ref；React 19 函数组件可将 ref 作为 prop 接收。应优先声明式 props，确需命令式操作时再暴露句柄。

追问与易错点： 来源：React 19。旧项目不要直接照搬新版本写法。

18. lazy、Suspense 和 Error Boundary 分别负责什么？

展开答案与追问

参考答案： lazy 延后加载组件代码；Suspense 为支持挂起的数据或代码显示 fallback；Error Boundary 为后代渲染错误提供兜底与上报，常以类组件的错误生命周期实现。Suspense 不是通用错误捕获器。

追问与易错点： Effect 内普通 fetch 不会自动触发 Suspense；边界通常不捕获事件处理器、普通异步回调或边界自身错误。

19. 自定义 Hook 是否共享状态？

展开答案与追问

参考答案： 自定义 Hook 复用有状态逻辑，不会仅因调用同一 Hook 就共享状态；每个组件中的调用通常各自拥有状态。需要共享数据时应显式通过共同状态所有者、Context 或外部 store 连接。

追问与易错点： 追问：Hook 文件里的模块级变量可能被共享，但这不等于 React 自动管理了共享生命周期。

20. React 19 常见 API 面试补充有哪些？

展开答案与追问

参考答案： 可了解 useActionState 表达 Action 的结果与待处理状态，useOptimistic 表达乐观 UI，react-dom 的 useFormStatus 读取所在表单提交状态，以及 use 读取 Promise 或 Context。它们解决不同阶段的问题，不是旧 Hooks 的统一替代品。

追问与易错点： use 的条件调用规则与传统 Hooks 不同；乐观更新仍需失败恢复与并发语义。React 19 官方说明