关于React16.0的componentDidCatch方法解读
作者：qq_43239820
这篇文章主要介绍了关于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}React错误处理(componentDidCatch)
看react 文档突然发现有这个 错误处理函数，好像是17年9月出的，这个真的绝了可以帮助我们捕捉错误咯
React 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，则会触发该函数。
官网例子
下面这个：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}当然你可以把这个组件封装下成为
<ErrorBoundary> <MyWidget /> </ErrorBoundary>
然后在顶部或任何地方，你可以这样使用它
另一个特性：
componentDidCatch 是包含错误堆栈的 info 对象！
{this.state.info && this.state.info.componentStack}当然我是这么用的在路由那边
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
hasError: false
}
}
componentDidCatch(error, info) {
console.log(error, info)
this.setState({
hasError: true
})
}
render() {
return this.state.hasError ?
<h2>页面出错了404</h2>
: (
<React.Fragment>
{/* 检验是否有登录信息 */}
<AutoRoute />
{/* 有了switch后，匹配到path后就不会再匹配下去了 */}
<Switch>
<Route path="/login" component={Login}></Route>
<Route path='/register' component={Register}></Route>
<Route path='/chat/:user' component={Chat}></Route>
</Switch>
</React.Fragment>
)
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。