React 进阶面试题, React 15 和 React 16.x 的主要区别是什么?
React 进阶面试题, React 15 和 React 16.x 的主要区别是什么?
QA
Step 1
Q:: React 15 和 React 16.x 的主要区别是什么？
A:: React 15 和 React 16 之间的主要区别包括以下几点：
1. **架构**：React 16 引入了 Fiber 架构，这是一种完全重写的协调引擎，使得 React 能够更好地管理渲染和更新，提高了响应速度和流畅度。
2. **错误处理**：React 16 引入了新的错误边界(Error Boundaries)，使得组件在渲染时发生错误不会导致整个应用崩溃，只会影响当前组件树的渲染。
3. **返回多个元素**：React 16 支持组件返回数组和字符串，而不再需要额外的包裹元素，如 <div>。
4. **Portals**：React 16 引入了 Portals，使得可以将子节点渲染到 DOM 树的不同位置，而不会改变 React 组件的结构。
5. **性能**：由于 Fiber 架构，React 16 在处理复杂动画和其他高性能场景时表现更佳。
6. **自定义 DOM 属性**：React 16 允许你在组件中使用任意的自定义 DOM 属性，这在之前的版本中是不允许的。
Step 2
Q:: 什么是 React Fiber，为什么它重要？
A:: React Fiber 是 React 16 引入的新协调引擎，旨在提高 UI 渲染和更新的流畅度和性能。Fiber 的设计目标包括更细粒度的更新、可中断的渲染以及支持并发渲染。Fiber 使得 React 可以更高效地处理复杂的用户界面场景，尤其是在需要响应用户交互的情况下。
Step 3
Q:: 什么是错误边界(Error Boundaries)？
A:: 错误边界是 React 16 引入的一个新特性，它允许组件在渲染、生命周期方法或其后代的构造函数中捕获错误，而不会导致整个组件树崩溃。你可以通过实现 componentDidCatch 方法来创建错误边界组件。当错误边界捕获到错误时，它可以显示一个回退 UI，而不是完全崩溃的组件树。
Step 4
Q:: React 16 如何处理渲染多个元素？
A:: 在 React 16 之前，一个组件只能返回一个单一的根元素（例如一个 <div>）。然而，在 React 16 中，组件可以直接返回一个数组或多个兄弟节点，而无需额外的包裹元素。这使得代码更加简洁，并减少了不必要的 DOM 节点。
Step 5
Q:: 什么是 Portals，如何使用它？
A:: Portals 是 React 16 引入的一个特性，允许你将组件的子节点渲染到 DOM 树的不同位置，脱离父组件的层次结构。你可以使用 ReactDOM.createPortal(child, container) 方法将子节点渲染到指定的容器中。Portals 在需要突破 CSS 层级限制（例如模态框或工具提示）时特别有用。