解析React16.0的componentDidCatch方法

解析React16.0的componentDidCatch方法

这段时间看了下react一些新特性，想说说其中一个。React 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，该函数可以捕捉到错误信息，并且可以展示相应的错误信息，这个方法真的很赞！

那么componentDidCatch究竟可以做什么？有什么好处？

• 当有错误发生时, 我们可以友好地展示 fallback 组件；
• 可以捕捉到它的子元素（包括嵌套子元素）抛出的异常；
• 可以复用错误组件；

代码详解：

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
        <PointerError>
          <SomeState></SomeState>
        </PointerError>
      </div>
    )
  }
}
class PointerError extends Component {
  // PointerError是错误捕获组件
  constructor(props) {
    super(props)
    this.state = {
      error: false,
      text: ''
    }
  }
  // parseStr(str) {
  // 格式化位置组件错误信息
  //   let res = str.match(/in[^\(]+\(/g)
  //   res = res.map(item => item.slice(3, -2))
  //   console.log('res', res)
  // }
  componentDidCatch(error, info) {
    console.log(error, info)
    alert('错误发生的位置：' + info.componentStack) //错误信息error.message, 错误堆栈error.stack, 组件堆栈info.componentStack
    this.setState({
      error,
      info,
      text: info.componentStack
    })
  }
  render() {
    if (this.state.error) {
      return (
        <div>
          <h1>错误是：{this.state.error.toString()}</h1>
          <h2>错误出现的位置是：{this.state.text}</h2>
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2942945378,442701149&fm=26&gp=0.jpg" />
        </div>
      )
    }
    return this.props.children
  }
}

class SomeState extends Component {
  constructor(props) {
    super(props)
    this.state = { error: false }
  }
  render() {
    throw new Error('我发生了错误') //报错信息
    return (
      <div>
        <div>你已经正确的打开了页面</div>
      </div>
    )
  }
}

上面代码中声明了一个PointerError 组件和一个SomeState 组件，PointerError 就是我们说的错误提示组件，我在其子元素中（也就是SomeState 组件）抛出来一个错误，它内置的componentDidCatch()方法可以帮我们捕捉到错误信息，在控制台打印可看到：

在这里插入图片描述

这样的话就可以用一个错误信息页面来代替由于某个组件报错而页面异常了

在这里插入图片描述

另一个特性
componentDidCatch 它也是一个包含错误堆栈的 info 对象，这将告诉你组件在哪里失效！

{this.state.info && this.state.info.componentStack}