简要介绍
在之前的React版本中规定,如果在组件中javascript报错,那么会在下一次的render中阻断,并且现实空白页。React之前没有提供一种合适的处理组件错误的方法,而React16.0中通过Error Boundaries来处理组件内部的错误,从而可以修正错误组件。
错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
注意:错误边界无法捕获以下场景中产生的错误:
- 事件处理(如果需要在事件处理器内部捕获错误,使用普通的 JavaScript try / catch 语句)
- 异步代码
- 服务端渲染
- 它自身抛出来的错误(并非它的子组件)
使用
如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。
错误边界的工作方式类似于 JavaScript 的 catch {},不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为成错误边界组件。大多数情况下, 只需要声明一次错误边界组件, 并在整个应用中使用它。
错误边界组件ErrorBoundary
import React, { Component } from 'react'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); } render() { if(this.state.hasError) { return ( <div> 这个组件发生了错误 </div> ); } return this.props.children; } } export default ErrorBoundar
可以作为一个常规组件去使用
<ErrorBoundary> <Goodbye /> </ErrorBoundary>
此时发现当组件抛出错误,虽然会打印错误,但并不影响程序继续正常运行。