请解释 React 中的 Error Boundaries 是什么，并说明它的主要用途。

回答思路

1. 【回答框架 1】Error Boundaries 是 React 组件，用于捕获其子组件树在渲染、生命周期方法和构造函数中抛出的 JavaScript 错误，并展示备用 UI，避免整个应用崩溃。
2. 【回答框架 2】它通过实现 componentDidCatch 或静态 getDerivedStateFromError 生命周期方法来捕获错误，前者用于记录错误信息，后者用于更新状态以渲染降级 UI。
3. 【回答框架 3】Error Boundaries 只能捕获子组件树中的错误，无法捕获自身错误、事件处理器、异步代码（如 setTimeout 或 Promise）以及服务端渲染中的错误。
4. 【回答框架 4】使用场景包括将页面拆分为多个独立区域，每个区域用 Error Boundary 包裹，确保局部错误不会影响整体应用，提升用户体验和可维护性。
5. 【回答框架 5】在 React 16 及之后版本中，Error Boundaries 是官方推荐的错误处理方式，替代了之前可能导致组件树卸载的未捕获错误行为。
6. 【关键点 1】Error Boundaries 是类组件，通过 componentDidCatch 或 getDerivedStateFromError 捕获子组件错误。
7. 【关键点 2】只能捕获渲染、生命周期和构造函数中的错误，不处理事件和异步错误。
8. 【关键点 3】用于隔离错误，展示备用 UI，防止整个应用白屏。
9. 【关键点 4】React 16 引入，是官方错误处理机制。
10. 【易错点 1】不能捕获自身错误，需在父级包裹。
11. 【易错点 2】事件处理器和异步代码中的错误需单独 try-catch 处理。
12. 【易错点 3】Error Boundaries 本身不能是函数组件，必须是类组件。