Reactjs 错误边界优雅处理方法demo

时间:2022-12-13 Jovie 人气:0

正文

每当你的react应用在任何react功能或类组件中遇到任何javascript错误时，都会破坏整个应用，这对你的终端用户来说是一种糟糕的体验。React 16 引入了错误边界 ，以摆脱你的应用程序中的这种糟糕体验。有了错误边界 ，你现在可以优雅地处理并让用户知道，每当你的应用程序遇到错误时，就会出现问题。

在这篇文章中，我们将学习如何通过实现错误边界来处理这些错误，并看看它们的作用。

首先，在vs code或任何其他IDE中创建一个新的react应用程序，我个人更喜欢VS Code。

什么是错误边界？

错误边界也是反应组件，它可以帮助你捕捉被错误边界包裹的组件中的错误，并显示一个回退 UI（当捕捉到错误时显示的UI，而不是崩溃的应用程序）。

错误边界可以捕捉

渲染错误
生命周期错误
构造器错误

错误边界不能捕捉

事件处理程序中的错误
异步代码中的错误
服务器端渲染中的错误
错误边界中的错误 (Duhh!)

错误边界的实现

要使一个类组件成为错误边界组件，你只需要定义**静态的getDerivedStateFromError()和componentDidCatch()**生命周期方法。

让我们创建一个新的类组件并使其成为一个错误边界，让我们滚动

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }
  componentDidCatch(error, errorInfo) {
    // use lifecycle to catch errors in any components below and re-render fallback UI
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }
  render() {
    if (this.state.errorInfo) {
      // Fallback UI
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // without error render normally in happy flow 
    return this.props.children;
  }
}

用错误边界包住组件

现在我们可以用错误边界来包装我们的整个应用程序，或者包装我们的子组件，以便在特定的组件上显示后退的用户界面，让我们看看这个动作吧

// Wrapping child component
<ErrorBoundary>
 <ComponentThatThrowsError />
</ErrorBoundary>

// Wrapping our entire application
<ErrorBoundary>
 <App />
</ErrorBoundary>

抛出一个错误

让我们在useEffect中抛出一个错误，看看我们的错误边界是否能抓住。

const ComponentThatThrowsError = () => {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (counter === 5) {
      throw new Error("Something went wrong");
    }
  }, [counter]);
  return (
    <div>
      <p>Parent Component Counter</p>
      <button
        className="btn"
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        {counter}
      </button>
    </div>
  );
};

当计数器的值等于5时，我们就抛出了一个错误。

晃动你的叔叔

我们可以看到，一旦子组件的计数器达到5，应用程序就会为该组件渲染回退的用户界面，而当主错误边界捕捉到一个错误时，它就会渲染出白色的屏幕，显示出出错的情况。

总结

我们在这一章中讲了很多，我希望这对你来说不算太多。你学到了如何创建错误边界，以及为什么和在哪里使用它们。它们如何使你的应用程序的体验更好。

加载全部内容