请列举 React 16 版本中作为全新特性引入的升级内容,并简要说明它们各自解决的问题。
考察说明
考察对 React 16 版本演进的了解程度,是否熟悉该版本的关键新特性及其设计动机。
回答思路
- 【回答框架 1】React 16 是 React 的一个重要里程碑,它重写了底层架构,带来了许多新特性。最核心的是新的 Fiber 协调引擎,它使得渲染过程可以被中断和恢复,从而支持了时间切片和并发模式的基础。
- 【回答框架 2】在渲染方面,React 16 引入了 Fragment,允许组件返回多个元素而不需要额外的 DOM 节点;同时新增了 createContext 和 createRef 的稳定版本,取代了旧的 context 和 ref 传递方式。
- 【回答框架 3】在错误处理上,React 16 新增了错误边界(Error Boundaries),允许组件捕获后代组件中的 JavaScript 错误并显示备用 UI,而不会导致整个应用崩溃。
- 【回答框架 4】React 16 还引入了 Portals,可以将子组件渲染到父组件 DOM 树之外的节点,方便实现弹窗等功能。此外,它还支持了自定义 DOM 属性和更灵活的渲染方式。
- 【回答框架 5】在性能优化上,React 16 支持了更细粒度的更新,并为未来的异步渲染和 Suspense 奠定了基础,虽然 Suspense 在正式版本中是在 16.6 中作为不稳定特性引入的。
- 【关键点 1】Fiber 架构是 React 16 的核心,支持可中断的渲染和异步渲染。
- 【关键点 2】引入了 Fragment、createContext、createRef 和 Portals 等新 API。
- 【关键点 3】错误边界提供了更好的错误处理机制,防止应用崩溃。
- 【关键点 4】支持自定义 DOM 属性和更灵活的元素渲染。
- 【关键点 5】为后续的 Suspense 和并发模式奠定了基础。
- 【易错点 1】不要将 React 16 的新特性与生命周期方法的改名混淆,如 componentWillMount 等被标记为不安全。
- 【易错点 2】注意 Fiber 是内部实现,开发者无需直接操作;不要将其理解为公开 API。
- 【易错点 3】不要认为 React 16 所有新特性都是稳定版本,如 Suspense 在 16.6 中仍为实验性。