【Q010】了解 React 中的 ErrorBoundary 吗，它有那些使用场景 about daily-question HOT 9 OPEN

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

from daily-question.

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

from daily-question.

前端防御性编程

from daily-question.

待答

from daily-question.

从其他文章里看到的 避免错误渲染白屏做异常中间处理的嵌套组件
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

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

from daily-question.

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

from daily-question.

这不就是try catch么。。。

from daily-question.

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

from daily-question.

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

from daily-question.