React16-错误边界

最新推荐文章于 2024-02-05 18:18:48 发布

原创最新推荐文章于 2024-02-05 18:18:48 发布 · 250 阅读

CC 4.0 BY-SA版权

此前React版本无合适处理组件错误的方法，组件报错会阻断渲染并显示空白页。React16.0通过Error Boundaries处理组件内部错误。错误边界是能捕获子组件树JS错误并渲染备用UI的组件，但无法捕获事件处理、异步代码等场景的错误，class组件可成为错误边界组件。

简要介绍

在之前的React版本中规定，如果在组件中javascript报错，那么会在下一次的render中阻断，并且现实空白页。React之前没有提供一种合适的处理组件错误的方法，而React16.0中通过Error Boundaries来处理组件内部的错误，从而可以修正错误组件。

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

注意：错误边界无法捕获以下场景中产生的错误：

事件处理（如果需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句)
异步代码
服务端渲染
它自身抛出来的错误（并非它的子组件）

使用

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。

错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为成错误边界组件。大多数情况下, 只需要声明一次错误边界组件, 并在整个应用中使用它。

错误边界组件ErrorBoundary

import React, { Component } from 'react';


class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }
  componentDidCatch(error, info) {
    this.setState({
      hasError: true
    });
  }


  render() {
    if(this.state.hasError) {
      return (
        <div>
            这个组件发生了错误
        </div>
      );
    }
    return this.props.children;
  }
}


export default ErrorBoundar

可以作为一个常规组件去使用

<ErrorBoundary>
  <Goodbye />
</ErrorBoundary>

此时发现当组件抛出错误，虽然会打印错误，但并不影响程序继续正常运行。