React文档篇-错误边界

错误边界

react组件，能够用来捕获并打印其子组件树任何位置的JavaScript错误，可渲染备用UI

错误边界没法捕获一下场景的错误

• 异步代码
• 事件处理
• 服务端渲染
• 它自身抛出来的错误

usage:

一个class组件定义了以上两个钩子中任意一个即为错误边界组件

1. static getDerivedStateFromError(error) 渲染备用UI
2. componentDidCatch(error, info) 打印错误信息，上传至服务器

// 简单实现一个错误边界
import React, { Component } from 'react'

import { logErrToMyService } from '../util/index'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    }
  }

  componentDidCatch(error, info) {
    logErrToMyService(error, info);
  }

  static getDerivedStateFromError(error) {
    // 在这里更新state使下一次渲染显示降级的UI
    return {
      hasError: true
    }
  }

  render() {
    if(this.state.hasError) {
      // 自定义降级后的渲染UI
      return (
        <h1>Something went wrong</h1>
      )
    }
    return this.props.children
  }
}

export default ErrorBoundary;
复制代码

事件处理

针对事件处理抛出的异常，因为它不是在渲染期间抛出的问题，固React渲染并不会受到影响，而且能在控制台打印出来，官方推荐，若是须要捕获事件处理的错误，使用try/catch语句便可

import React, { Component } from 'react'

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
      error: null
    }
  }

  handleClick() {
    const self = this;
    try {
      this.setState({
        count: self.state.count++
      })
    } catch (err) {
      console.log(err)
      this.setState({ error: self.state.error });
    }
  }

  render() {
    if(this.state.error) {
      return (
        <div>MyComponent has err</div>
      )
    }
    return (
      <div className="mycomponent"> <button onClick={this.handleClick.bind(this)}>change</button> </div>
    )
  }
}

export default MyComponent;
复制代码

即便一个组件发生在componentDidUpdate，而且是因为深层组件的一个setState操做引发的，其仍然够冒泡到最近的错误边界被捕获