Error boundaries 是 React 组件,它会在其子组件树中的任何位置捕获 JavaScript 错误,并记录这些错误,展示降级 UI 而不是崩溃的组件树。Error boundaries 组件会捕获在渲染期间,在生命周期方法以及其整个树的构造函数中发生的错误,可以捕获生命周期中的错误,但它不会捕获异步代码和事件处理函数中的错误。
如果 class 组件定义了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一个(或两者),它就成为了 Error boundaries。
static getDerivedStateFromError(error): 适合处理降级渲染,在UI上显示错误视图。componentDidCatch(error, info): 适合记录错误日志,比如上报服务端。
如果了解React Fiber,就应该知道,V16版本之后,React生命周期分为两个阶段:
- Render Frase
- Commit Frase
两个阶段的分界岭是render函数。 第一阶段生命周期函数可能会被重复调用;而一旦进入第二阶段,代码会一气呵成执行完毕。
如果异常发生在第一阶段,调用getDerivedStateFromError,如果异常发生在第二阶段,调用componentDidCatch。所以,getDerivedStateFromError适合显示UI错误组件,后者由于在render之后调用,适合处理非UI操作,如错误上报。