关于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>
    )
  }
}