简介

什么是错误边界？

当 React 应用中发生错误并抛出异常时，应用界面很可能无法继续正常显示，用户只能看到一个空白页面。为了防止这种情况，React 在 16.0 版本中引入了错误边界（Error Boundaries）。

错误边界是指能够捕获其子组件中某些错误的组件，它可以在发生错误时渲染一个备用的组件树，避免用户看到空白页面。错误边界始终作为某个组件树的父级组件存在。当该组件树内部抛出异常时，错误边界可以拦截并处理该错误。你可以将错误边界理解为针对组件层级结构的一种特殊的 try/catch 块。

错误边界能够处理以下情况引发的错误：

• 生命周期方法中的错误
• 在错误边界内部任意位置的 render() 方法中发生的错误
• 组件的 constructor() 构造函数中发生的错误

如果 React 在组件的生命周期方法、render() 方法或构造函数中遇到错误，错误边界可以安全地拦截并阻止错误扩散。此时，它可以展示一个降级 UI，提示用户重启应用或告知其系统出现异常。与 Context 组件类似，错误边界也可以嵌套使用。当错误发生时，由距离出错组件最近的上层错误边界负责处理。

注意：错误边界的主要目的是预防和处理导致用户界面渲染中断的错误，从而保障应用的基本可访问性。它并非用于处理数据验证等常规逻辑错误，也不应被用于此类场景。

局限性

在以下几种情况下，错误边界无法起作用：

• 事件处理函数
• 异步代码（例如 setTimeOut() 或 requestAnimationFrame()）
• 服务端渲染（SSR）
• 错误发生在错误边界自身内部

在上述情形中，错误边界要么没有必要生效，要么无法捕获相关错误。例如，若事件处理函数中抛出异常，通常不会影响组件的渲染过程，React 仍可维持界面正常显示，唯一的后果是该事件对应的交互功能失效。