React 第二十三章 使用错误边界捕获渲染错误

在 React 中，错误边界是一种能够捕获并处理渲染错误的机制。当渲染期间发生错误时，React 会中止渲染并显示错误信息，以防止错误的影响传播到整个应用程序。

使用错误边界有助于提高应用程序的可靠性和稳定性。在处理大型复杂应用程序时尤为重要，因为单个组件的错误可能会导致整个应用程序的崩溃。

要使用错误边界，需要创建一个继承自 React.Component 的类组件，并实现 static getDerivedStateFromError(error) 或者 componentDidCatch(error, errorInfo) 生命周期方法。

getDerivedStateFromError和 componentDidCatch区别

• getDerivedStateFromError 静态方法

  • 运行时间点：渲染子组件的过程中，发生错误之后，在更新页面之前（整个应用没有崩溃，直接渲染降级 UI）
  • 注意：只有子组件发生错误，才会运行该函数
  • 该函数返回一个对象，React 会将该对象的属性覆盖掉当前组件的 state
  • 参数：错误对象
  • 通常，该函数用于改变状态

• componentDidCatch 实例方法

  • 运行时间点：渲染子组件的过程中，发生错误，更新页面之后（整个应用已经崩溃了，之后再重新渲染整个应用，当然会排除有问题的那一部分UI，那一部分渲染降级UI），由于其运行时间点比较靠后，因此不太会在该函数中改变状态
  • 通常，该函数用于记录错误消