关于react16.4——错误边界

  • Z时代
  • 2024-01-10
  • 分类：综合

react

　　过去，组件内的 JavaScript 错误常常会破坏 React 内部状态,并导致它在下一次渲染时产生神秘的错误。这些错误总会在应用代码中较早的错误引发的，但 React 并没有提供一种方式能够在组件内部优雅地来处理，也不能从错误中恢复。

　　部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。为了解决 React 用户的这个问题，React 16引入了一个 “错误边界(Error Boundaries)” 的新概念。

错误边界是 React 组件，它可以 在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

如果一个类组件定义了一个名为 componentDidCatch(error, info): 的新生命周期方法，它将成为一个错误边界：

componentDidCatch的参数：

error 是被抛出的错误。

info 是一个含有 componentStack 属性的对象。这一属性包含了错误期间关于组件的堆栈信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    logErrorToMyService(error, info);
  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

然后你可以像一个普通的组件一样使用，

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

componentDidCatch() 方法机制类似于 JavaScript catch {}，但是针对组件。仅有类组件可以成为错误边界。

但是错误边界 无法 捕获事件处理器内部的错误。因此，如果你需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  handleClick = () => {
    try {
      // ...
    } catch (error) {
      this.setState({ error });
    }
  }
  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <div onClick={this.handleClick}>Click Me</div>
  }
}

以上是 关于react16.4——错误边界 的全部内容， 来源链接： utcz.com/z/381359.html

回到顶部