ReactJS componentDidCatch() 方法

在React16版本中，新增了一个componentDidCatch()的生命周期方法，该方法主要是为了处理组件中的错误，避免错误导致组件树崩溃。该方法会在组件渲染期间、在生命周期方法中或其子组件的构造函数中发生错误时被调用。使用该方法可以实现异常捕获和处理，增强组件的健壮性。

语法

componentDidCatch(error, errorInfo)

参数解释：

• error: 错误信息
• errorInfo: 包含有关错误的栈追踪信息

代码示例

下面是一个使用componentDidCatch()方法处理组件错误的示例：

import React, { Component } from 'react';

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            error: null,
            errorInfo: null
        }
    }
    componentDidCatch(error, errorInfo) {
        this.setState({
            hasError: true,
            error: error,
            errorInfo: errorInfo
        })
    }
    render() {
        if (this.state.hasError) {
            return (
                <div>
                    <h1>Something went wrong.</h1>
                    <p>The error message is:{this.state.error.toString()}</p>
                    <p>The error stack is:{this.state.errorInfo.componentStack}</p>
                </div>
            )
        }
        return this.props.children;
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello, React!</h1>
                <ErrorBoundary>
                     <ChildComponent />
                </ErrorBoundary>
            </div>
        )
    }
}

class ChildComponent extends Component {
    componentDidMount() {
        throw new Error('test error');
    }
    render() {
        return (
            <div>
                <p>This is a child component.</p>
            </div>
        )
    }
}

在上面的示例中，ErrorBoundary组件使用componentDidCatch()方法来处理组件错误。当子组件ChildComponent中发生错误时，componentDidCatch()方法会将错误信息存储在状态中。最后，ErrorBoundary组件会根据是否有错误来判断是否渲染错误信息。另外，由于我们的ErrorBoundary组件包含了ChildComponent组件，因此我们需要将ChildComponent组件包裹在ErrorBoundary组件中来实现错误处理。

总结

通过ReactJS componentDidCatch() 方法，我们可以在组件中实现异常处理，并且避免因为异常导致整个组件树崩溃，从而增强组件的健壮性。当我们的应用程序出错时，可以通过 componentDidCatch() 方法来获取错误信息，从而更容易地调试和排查错误。