react-错误边界

错误边界

其实就是一个组件

react组件发生错误时,会层层向上传递直至根组件,设置一个错误边界组件可以防止错误继续向上传递,避免组件树被销毁

---

App.js

import React, { Component } from 'react'
import ErrorBound from './components/ErrorBound'

function ChildA() {
  throw new Error("发生错误")
  return (
    <h1>ChildA</h1>
  )
}

export default class App extends Component {
  render() {
    return (
      <div>
        <ErrorBound>
          <ChildA />
        </ErrorBound>
        <h1>这会正常渲染</h1>
      </div>
    )
  }
}

ErrorBound.js

import { PureComponent } from 'react'

export default class ErrorBound extends PureComponent {

  state = {
    hasError: false
  }

  static getDerivedStateFromError(error) {
    // 参数为错误对象, 发生时间点为渲染子组件过程中,发生错误之后,更新页面之前
    // 此组件报错不会运行这个函数

    // 返回值会覆盖state
    return {
      hasError: true
    }
  }

  // componentDidCatch(error, info) {
  //   // error 为错误信息
  //   // info 为错误传递的路径 比如 组件解构 APP -> A -> B -> C  C组件报错, 则返回 c-b-a-app 四行相关数据
  //   // 该函数运行时间点: 组件渲染之后, 所以在这通常不改变组件状态,只负责向服务器发送错误信息,用于记录
  // }

  render() {
    // 如果发生错误则不进行渲染
    if (this.state.hasError) {
      return null
    }
    return this.props.children
  }
}