React error boundary

为什么要引入这个生命周期？

React16之前,组件内部的错误经常会引出莫名奇妙的异常，这些错误还不能在组件中去审查，React 16引入了一个新的概念——错误边界

错误边界 (error boundary)用来捕获后代组件错误，渲染出备用页面。并不会渲染那些发生崩溃的子组件树

特点：只能捕获后代组件生命周期产生的错误（主要是render()），不能捕获自己组件产生的错误和其他事件在合成事件，定时器中产生的错误。
下面这些情况无法捕获到异常：
事件处理
异步代码
服务端渲染
自身抛出来的错误

作用点：错误边界目前只在类组件中实现，生产环境中起作用。
使用方式：getDerivedStateFromError配合componentDidCatch使用

import React, { Component } from 'react'
export default class App extends Component {
  state={
    hasError:false
  }
  //生命周期函数，一旦组件报错就会触发
  static getDerivedStateFromError(error){
    console.log(error,'error');
    //在render之前触发，返回新的state
    return {
      hasError:true
    }
  }
  componentDidCatch(error,info){
    //统计页面错误，发送请求到后端
    console.log(error,info,'error','info');
  }
  render() {
    const {hasError}=this.state
    return (
      <div>
        {hasError?'网络异常，请稍后再试': <Child/>}
      </div>
    )
  }
}
//故意写报错的，捕获错误
class Child extends Component {
  state={
    list:''
  }
  render() {
    const {list}=this.state
    return (
      <div>
        {list.map(item=>item)}
      </div>
    )
  }
}

可以当一个常规组件使用

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  getDerivedStateFromError(error) {
    //更新 state 使下一次渲染能够显示降级后的 UI
    return {hasError: true};
  }
  componentDidCatch(error, errorInfo){
    // 你同样可以将错误日志上报给服务器
    logErrorToService(error, errorInfo);
  }
  render(){
    if (this.state.hasError){
      // 你可以自定义降级后的 UI 并渲染
      return <h1>wrong message</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

<ErrorBoundary>
  <A/>
  <B/>
  <C/>
</ErrorBoundary>