# 了解 React 中的 ErrorBoundary 吗，它有那些使用场景

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 11 (opens new window)

Author

回答者: shfshanyue (opens new window)

待答

Author

回答者: hackftz (opens new window)

从其他文章里看到的避免错误渲染白屏做异常中间处理的嵌套组件 class ErrorBoundary extends Component { static getDerivedStateFromError() { return { hasError: true }; } state = { hasError: false, }; componentDidCatch(error, info) { // reportError(error, info); } render() { const { hasError } = this.state; const { children } = this.props; if (hasError) { return

系统异常，请稍后再试

; } return children; } } function render(Component, props) { const rootElement = document.getElementById("root"); ReactDOM.render( <Component {...props} /> , rootElement ); }

作者：蚂蚁保险体验技术链接：https://juejin.im/post/5de91d0f51882512400acafd 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Author

回答者: BertieGo (opens new window)

是 react 内的一个钩子，用于在组件内发生了 js 错误时候的错误处理。使用场景是在发生 js 报错的时候不至于说白屏，可以转去别的页面提示用户这里报了错，转用别的去到去继续操作。

Author

回答者: baihech (opens new window)

这不就是 try catch 么。。。

Author

回答者: baihech (opens new window)

错误不抛出，交给 catch 处理，然鹅并不能预先知道错误类型。。。

Author

回答者: libin1991 (opens new window)

前端防御性编程 (opens new window)

Author

回答者: into-piece (opens new window)

了解，在推出之前报错会直接白屏，总是需要我们前端进行手动 try catch，react16 新增了两个生命周期 componentdidcatch 和 static getDerivedStateFromError 从框架级别让我们更方便捕捉异常并显示备用 ui。其实就是在整个 workloop 外面包一层 try catch，报错时候遍历父组件找到这两个生命周期并把堆栈信息塞给生命周期进行判断。

Author

回答者: into-piece (opens new window)

顺带一句 suspense 的原理好像也是这个

Author

回答者: Murraya-paniculata (opens new window)

嵌套的比较深的组件存在出错的风险，组件自身没有容错机制，会逐层交给外层组件处理。这个过程会导致整个组件树销毁。页面结果就是白屏。而且生产环境不会报出有效的错误信息，不好定位问题。使用 ErrorBoundary 就是在可能出错的组件上套一层组件，在这个新的组件中去容错

← 0. 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来 2. 有没有使用过 react hooks，它带来了那些便利 →