react 错误边界

2022-11-24 22:38:18

当部分的 JavaScript 代码报错后，我们希望只有报错的部分提醒我们错误，不应该导致整个程序崩溃，为此 react16 引入了错误边界的概念，保证了发生在 UI 层的错误不会连锁导致整个程序崩溃，你想想，带着老婆出了城，吃着火锅唱着歌，突然就被麻匪劫了，突然就报错了，然后又不知道是哪里的错误，我们可以使用错误边界组件，来捕获其子组件树任何位置的 js 错误并且打印出来方便查看修改，同时展示错误提示 UI。

在 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，可以使用static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息

我们可以基于这个特性来封装一个 HOC 来监听传入的组件的报错

export default function ErrorHandlerHOC(Component) {
  return class ErrorHandler extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        hasError: false,
        error: null,
        errInfo: null
      }
    }
    static getDerivedStateFromError() {
      // 更新 state 使下一次渲染显示降级后的 UI
      return { hasError: true }
    }
    componentDidCatch(error, errInfo) {
      // 捕获错误
      this.setState({ hasError: true, error, errInfo })
    }
    render() {
      // 判断 有报错则显示降级UI
      if (this.state.hasError) {
        return <div>Something went wrong here!!!</div>
      }
      // 无错误直接返回传入的组件
      return <Component />
    }
  }
}

这样我们就完成了一个处理错误的 HOC

注意 有些场景下的错误无法被捕获

• 事件处理
• 异步代码
• 服务端渲染
• 它自身抛出来的错误（并非它的子组件）