错误边界
部分 UI 的 javascript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 – 错误边界。
错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 javascript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间,生命周期方法和整个组件树的构造函数中捕获错误。
注意
错误边界无法捕获以下场景中产生的错误:
- 事件处理
- 异步代码(比如 setTimeout 或 requestAnimationFrame 回调函数)
- 服务端渲染
- 它自身抛出来的错误(并非它的子组件)
如果一个 class 组件中定义了 static getDerivedStateFromError()或者 componentDidCatch()这两个生命周期方法中的任意一个(或两个)时,那么他就变成一个错误边界。当抛弃错误后,请使用 static getDerivedStateFromError() 渲染备用 UI,使用componentDidCatch() 打印错误信息。
class ErrorBoundary extends React.Component {
constructor(porps){
super(props);
this.state = {
hasError: false };
}
static getDerivedStateFromError(error) {
//更新 state 使下一次渲染能够显示降级后的 UI
return {
hasError:true ]