Question

我对here的了解：

componentDidCatch：

总是在浏览器中调用
在DOM已经更新的“提交阶段”被调用
应用于错误报告之类的

getDerivedStateFromError：

应用于呈现后备用户界面

还是，我对某些事情有些困惑：

它们都捕获相同类型的错误吗？或每个生命周期将捕获不同的错误？
我是否应该始终同时使用这两者（可能在同一个“捕捉错误”组件中使用）？
“使用componentDidCatch进行错误恢复不是最佳方法，因为它会强制回退UI始终同步呈现” 这是怎么回事？

Answer 1

问题中的陈述大部分是正确的。目前，SSR不支持错误边界，getDerivedStateFromError和componentDidCatch不会影响服务器端。

它们都捕获相同类型的错误吗？还是每个生命周期都会捕获不同的错误？

它们捕获相同的错误，但是处于不同的阶段。以前单独使用componentDidCatch可以做到这一点：

  static getDerivedStateFromError() {
    return { hasError: true };
  }

和

  componentDidCatch() {
    this.setState({ hasError: true });
  }

做同样的事情，componentDidCatch在服务器端将不受支持，直到将对异步呈现的支持添加到ReactDOMServer为止。

我是否应该始终同时使用这两个组件（可能在同一个“捕捉错误”组件中使用）？

您可以同时使用。 the documentation中的示例显示：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

在这种情况下，责任在他们之间分配。 getDerivedStateFromError唯一有好处的就是，如果发生错误，则更新状态，而componentDidCatch提供副作用，并且可以在需要时访问this组件实例。

“使用componentDidCatch进行错误恢复不是最佳方法，因为它强制后备UI始终同步呈现”这是怎么回事？

新的React版本旨在实现更高效的异步渲染。正如the comment中所提到的，对于后备UI来说，同步渲染并不是一个大问题，因为它可以被认为是边缘情况。

Answer 2

在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这两种方法。可以在实现错误边界时使用它们

根据React docs

后代组件引发错误后，将调用

getDerivedStateFromError生命周期。它接收作为参数抛出的错误，并且应返回值以更新状态。

它们都捕获相同类型的错误吗？或每个生命周期将捕获不同的错误？

这两个生命周期方法都将捕获相同的错误，但是这两个组件的参数都不同。

getDerivedStateFromError仅接收错误作为参数时，componentDidCatch也接收第二个参数info, i.e An object with a componentStack key containing information about which component threw the error.

getDerivedStateFromError()在“渲染”阶段被调用，因此不允许出现副作用。对于这些用例，请改用componentDidCatch()。尽管componentDidCatch也可以用于setState，但是在以后的版本中将不推荐使用

componentDidCatch应该用于记录日志错误之类的副作用

@Brian Vaughn还通过您提供的链接详细说明了它们的用法

getDerivedStateFromError用于服务器端渲染。   componentDidCatch是一个提交阶段生命周期，但是没有提交   服务器上的阶段。 getDerivedStateFromError是渲染阶段   生命周期，因此可以用来启用错误处理   服务器。

渲染阶段恢复更安全。通过以下方式进行错误恢复的故事   componentDidCatch有点笨拙，因为它依赖于   对组件下面的所有内容的“ null”中间提交   错误的。这可能会导致任何内部的后续错误   实现了componentDidMount的树中更高的组件   componentDidUpdate并仅假设其引用为非null   （因为它们始终处于非错误情况下）。

getDerivedStateFromError不会强制进行同步渲染。因为状态从提交更新   阶段生命周期始终是同步的，并且因为componentDidCatch   在提交阶段被调用–使用componentDidCatch进行错误处理   恢复并非最佳，因为它会强制将备用用户界面始终   同步渲染。（公认这不是一个大问题，因为   错误恢复应该是一个很好的例子。）

如果发生错误，则错误边界为   首先会调用getDerivedStateFromError()方法（以进行更新   状态），然后是render（）方法（以实际呈现后备UI），   然后componentDidCatch（一旦后备用户界面已提交到   DOM）。

如果您的错误边界定义了其他生命周期方法（例如   componentWillUpdate，componentDidUpdate）也会被调用，   就像在其他任何渲染上一样。

”使用componentDidCatch进行错误恢复不是最佳方法，因为它强制后备UI始终同步呈现”出了什么问题这样吗？

这意味着，在渲染后备UI的render方法之后调用componentDidCatch，这可能会导致更多问题，而getDerivedStateFromError在渲染阶段之前更新状态，以便渲染正确的后备UI，而不再错误会导致渲染的组件。此外，新版本还针对异步渲染，这可能与当前方法有关

Answer 3

实际上，他们两个都有相同的目标，但是在不同的阶段，对于编写ErrorBoundary组件，我肯定会使用ReactJs Docs，因此我使用getDerivedStateFromError方法。该文档的句子如下：

在引发错误后，使用静态getDerivedStateFromError()呈现后备UI。使用componentDidCatch()记录错误信息。

当然，这有一些原因，因此，我始终使用getDerivedStateFromError来渲染后备UI，并使用componentDidCatch来捕获信息并执行某些操作。

getDerivedStateFromError和componentDidCatch

3 个答案: