错误边界（React）

错误边界

部分 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 ]