# 了解 React 中的 ErrorBoundary 吗，它有那些使用场景
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 11 (opens new window)
Author
待答
Author
从其他文章里看到的 避免错误渲染白屏做异常中间处理的嵌套组件 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(
作者：蚂蚁保险体验技术 链接：https://juejin.im/post/5de91d0f51882512400acafd 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
Author
是 react 内的一个钩子，用于在组件内发生了 js 错误时候的错误处理。 使用场景是在发生 js 报错的时候不至于说白屏，可以转去别的页面提示用户这里报了错，转用别的去到去继续操作。
Author
这不就是 try catch 么。。。
Author
错误不抛出，交给 catch 处理，然鹅并不能预先知道错误类型。。。
Author
Author
了解，在推出之前报错会直接白屏，总是需要我们前端进行手动 try catch，react16 新增了两个生命周期 componentdidcatch 和 static getDerivedStateFromError 从框架级别让我们更方便捕捉异常并显示备用 ui。其实就是在整个 workloop 外面包一层 try catch，报错时候遍历父组件找到这两个生命周期并把堆栈信息塞给生命周期进行判断。
Author
顺带一句 suspense 的原理好像也是这个