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 
Something went wrong.
;
        }

        return this.props.children;
    }
}

// 使用 错误边界

    

---

4、js代码还是用try / catch 捕获错误

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        try {
            // 执行操作，如有错误则会抛出
        } catch (error) {
            this.setState({ error });
        }
    }

    render() {
        if (this.state.error) {
            return 
Caught an error.
        }
        return Click Me
    }
}

---

三、实例展示

一个使用 错误边界 的示例，新建并复制下面代码到index.html文件，浏览器打开index.html即可看到效果。

---

四、参考文档：

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