为组件创建错误边界

默认情况下，组件渲染错误会导致整个应用程序中断，创建错误边界可确保在特定组件发生错误时应用程序不会中断.

错误边界是一个 React 组件，可以捕获子级组件在渲染时发生的错误，当错误发生时，可以将错误记录下来，可以显示备用 U 界面.

错误边界涉及到两个生命周期西数，分别为 getDerivedStateFromError 和 componentDidCatch.

getDerivedStateFromError 为静态方法，方法中需要返回一个对象，该对象会和state对象进行合井，用于更改应用程序状态．

componentDidCatch 方法用于记录应用程序错误信息． 该方法的爹数就是错误对象

import React from "react"
import App from "./App"
export default class ErrorBoundaries extends React.Component {
  constructor() {
    super()
    this.state = {
      hasError: false
    }
  }
  componentDidCatch(error) {
    console.log("componentDidCatch")
  }
  static getDerivedStateFromError() {
    console.log('getDerivedStateFromError')
    return {
      hasError: true
    }
  }
  render() {
    if (this.state.hasError) {
      return <div>发生了错误</div>
    }
    return <App />
  }
}
//app.js
...
throw new Error('错误')
...

以上就是react类组件为组件创建错误边界全部内容,感谢大家支持自学php网。