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