关于react.js:react边界错误问题优化

了解：

谬误边界(Error boundary)：用来捕捉后辈组件谬误，渲染出备用页面

特点：

只能捕捉后辈组件生命周期产生的谬误，不能捕捉本人组件产生的谬误和其余组件在合成事件、定时器中产生的谬误

应用形式：

getDerivedStateFromError 配合 componentDidCatch

// 生命周期函数，一旦后盾组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}
// 渲染组件出错，会调用这个生命周期函数
componentDidCatch(error, info) {
    // 统计页面的谬误。发送申请到后盾去,配合后盾产生对应的谬误反馈机制，比方邮件或者短信告诉
    console.log(error, info);
}

示例：

export default class Parent extends Component {
  state = {
    hasError: '' //用于标识子组件是否产生谬误
  }

  //当Parent的子组件呈现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
  static getDerivedStateFromError(error) {
    console.log('@@@', error)
    return { hasError: error }
  }

  componentDidCatch() {
    console.log('此处统计谬误，反馈给服务器，用于告诉编码人员进行bug的解决')
  }

  render() {
    return (
      <div>
        <h2>我是Parent组件</h2>
        // 能够应用用户心理学办法，网络不稳固等揭示形式
        {this.state.hasError ? <h2>以后网络不稳固，稍后再试</h2> : <Child />}
      </div>
    )
  }
}

class Child extends Component {
  state = {
    users: [
      { id: '001', name: 'tom', age: 18 },
      { id: '002', name: 'jack', age: 19 },
      { id: '003', name: 'peiqi', age: 20 }
    ]
  }

  render() {
    return (
      <div>
        <h2>我是Child组件</h2>
        {this.state.users.map(userObj => {
          return (
            <h4 key={userObj.id}>
              {userObj.name}----{userObj.age}
            </h4>
          )
        })}
      </div>
    )
  }
}