ErrorBoundary 错误边界
最后更新：2026-10-28
ErrorBoundary 错误边界
ErrorBoundary 是组件级的安全网：子组件树抛错时接住异常、渲染兜底 UI，而不是让整页白屏。它是 class 组件（getDerivedStateFromError / componentDidCatch），在 React 19 之前没有 Hook 版本。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 16 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
class ErrorBoundary extends Component {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
componentDidCatch(error, info) { /* 上报日志 */ }
render() { return this.state.hasError ? <Fallback/> : this.props.children }
}⚙️ 参数
| children | 被保护的子组件树——边界内任何渲染错误都会被接住。 |
|---|---|
| fallback（自行约定） | 兜底 UI：可设计为 props 传入（fallback=<UI/>）或边界内部 state。 |
返回值：无（class 组件）。子树正常时原样渲染 children；出错时渲染兜底 UI。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
页面不白屏：显示兜底文案「出错了，但页面还活着」——Bomb 的渲染错误被边界接住。💡 要点
⚠️ 注意 错误边界接不住：事件处理函数、异步回调、服务端渲染、它自身抛的错。事件里的错误用 try/catch。
💡 提示 生产项目通常用 react-error-boundary 库（提供 useErrorBoundary Hook 式 API），不必手写 class。
ℹ️ 说明 边界按「树的位置」生效：放在路由层可保住整页，放在卡片层只牺牲一张卡片。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么错误边界只能是 class 组件？
A
Q 事件处理函数里的错误会被边界接住吗？
A
Q 边界应该放在哪一层？
A
