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