React 16 的错误边界：构建更稳健的 UI

2024-01-20 03:18:42

React 16 中的错误边界是什么？

错误边界是一个组件，它可以捕获子组件中发生的运行时错误，并阻止这些错误传播到应用程序的其他部分。这可以防止应用程序崩溃，并允许开发人员优雅地处理错误。

要创建错误边界，您需要创建一个类组件并实现两个生命周期方法：componentDidCatch() 和 render()。componentDidCatch() 方法会在子组件中发生错误时被调用，它有两个参数：error 和 info。error 参数是错误对象，info 参数是错误发生时的组件堆栈信息。

在 componentDidCatch() 方法中，您可以记录错误并显示友好的错误消息。您还可以重新渲染组件以恢复应用程序的状态。

如何使用错误边界

要使用错误边界，您需要将其放在您希望捕获错误的组件之上。例如，您可以将错误边界放在应用程序的根组件上，以捕获整个应用程序中的错误。您也可以将错误边界放在特定的组件上，以捕获该组件及其子组件中的错误。

错误边界的最佳实践

使用错误边界来捕获所有可能发生的错误。
在 componentDidCatch() 方法中记录错误并显示友好的错误消息。
重新渲染组件以恢复应用程序的状态。
使用错误边界来提高应用程序的健壮性。

错误边界的示例

以下是一个使用错误边界的示例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Log the error to the console
    console.error(error);

    // Display a friendly error message
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // Render a friendly error message
      return <h1>Something went wrong.</h1>;
    }

    // Render the children
    return this.props.children;
  }
}

ReactDOM.render(
  <ErrorBoundary>
    <MyComponent />
  </ErrorBoundary>,
  document.getElementById('root')
);