React用错误边界来捕获和处理异常错误

一、解决什么问题？

UI 中 JavaScript 错误不应该导致整个应用崩溃，错误边界就是解决方案(React 16 增加的功能)。

---

二、有哪些特性？

1、定义

• 可捕获子组件 JavaScript 错误，打印错误并展示备用UI的clas组件。

2、无法捕获的错误：

• 事件处理
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
• 服务端渲染
• 它自身抛出来的错误（并非它的子组件）

3、怎么写？

错误边界是包含下面任意一个或两个方法 的class组件：

• static getDerivedStateFromError() ：渲染备用 UI

• componentDidCatch() ：打印错误信息

//  错误边界  实例
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 你同样可以将错误日志上报给服务器
        logErrorToMyService(error, errorInfo);
    }

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

        return this.props.children;
    }
}

// 使用 错误