前端/移动开发面试题更新 2026-08-05

请从架构、渲染机制、错误处理、DOM 属性等维度,说明 React 15 与 React 16.x 版本之间主要的区别有哪些?

前端/移动开发技术原理方案权衡React

考察说明

考察候选人对 React 版本演进关键差异的理解,重点在于架构变更与渲染机制。

回答思路

  1. 【回答框架 1】React 16.x 的架构核心是 Fiber 协调器,它取代了 React 15 的递归栈协调器。Fiber 将渲染工作拆分成可中断、可优先级调度的单元,从而支持时间切片和并发模式,这是两者最根本的架构差异。
  2. 【回答框架 2】渲染机制上,React 15 完全依赖浏览器原生事件冒泡到 document 来处理事件,而 React 16 将事件绑定到根容器上,并模拟了冒泡和捕获阶段;此外 React 16 对服务端渲染进行了重写,支持流式渲染。
  3. 【回答框架 3】错误处理方面,React 16 引入了错误边界(Error Boundaries),通过 componentDidCatch 或静态 getDerivedStateFromError 捕获子组件树中的错误,避免整个应用崩溃,而 React 15 没有这一机制。
  4. 【回答框架 4】DOM 与生命周期方面,React 16 不再要求根节点必须是单一元素,支持返回数组、字符串等类型;同时新增 componentDidCatch、getDerivedStateFromProps 等生命周期方法,并将 componentWillMount 等旧生命标记为不安全。
  5. 【回答框架 5】React 16 还允许自定义 DOM 属性(未知属性直接透传),而 React 15 会忽略未知属性;同时新版本支持 Fragment、createPortal 等特性,两者在渲染包体积和核心算法上也明显不同。
  6. 【关键点 1】Fiber 架构实现可中断的异步渲染,是 React 16 最核心的变更。
  7. 【关键点 2】React 16 引入错误边界机制,提升应用健壮性。
  8. 【关键点 3】React 16 支持多类型根节点渲染,如数组、Fragment。
  9. 【关键点 4】生命周期方法调整,部分旧方法标记为不安全。
  10. 【关键点 5】React 16 事件系统挂载到根容器,而非 document。
  11. 【易错点 1】不要将时间切片与 Concurrent 模式混为一谈,两者有关联但概念不同。
  12. 【易错点 2】React 16 的 Fiber 重构并未完全移除递归调用,只是将协调过程迭代化。
  13. 【易错点 3】错误边界不能捕获事件处理器、异步代码和服务端渲染中的错误。