16-捕捉错误

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

4.2.7　捕捉错误

错误处理是编写干净的程序最重要的部分。到目前为止，我们还没有看到React中用来处理错误的任何特殊方法。如果你使用React已经有很长时间，那么可能记得，如果React组件的 render 或生命周期方法发生了错误，之前版本的React会锁定整个应用程序。这往往是挫折的根源，因为这意味着未捕获的错误可能会锁住整个应用程序。

最近版本的React引入了一个被称为错误边界的新概念来帮助解决这个问题。如果组件的构造函数、render或生命周期方法抛出未捕获的异常，React会将组件和它的子组件从DOM中卸载。这乍看起来似乎令人困惑，但它的好处是能够避免组件的错误破坏应用程序的其余部分。

练习4-2　组件间的差异

创建自抽象基类 React.Component 的组件与创建自普通函数而未经继承的组件之间的区别是什么？

可以通过使用组件从 React.Component 继承的 componentDidCatch 方法来处理这些错误。该方法的语义与JavaScript中的 try ... catch 的行为相似。 componentDidCatch 可以访问抛出的错误和错误消息。使用这些可以确保组件适当地响应错误。在大型应用程序中，可以使用该方法为单个组件（可能是小部件、卡片组件或其他组件）设置错误状态或在应用程序级别设置错误状态。代码清单4-6展示了将 componentDidCatch 方法添加到父组件中的方法。

代码清单4-6　处理错误

//...
class ChildComponent extends Component {
    constructor(props) {
        super(props);
        console.log('ChildComponent: state');
        this.oops = this.oops.bind(this);  ⇽--- 绑定类方法
    }
    //...
    oops() {
        this.setState(() => ({ oops: true }));  ⇽--- 切换状态以便抛出错误
    }
    render() {
        console.log('ChildComponent: render');
        if (this.state.oops) {
            throw new Error('Something went wrong');  ⇽--- 在render方法中抛出错误
        }
        return [
            <div key="name">Name: {this.props.name}</div>,
            <button key="error" onClick={this.oops}>
                Create error
            </button>
        ];
    }
}
class ParentComponent extends Component {
    //...
    constructor(props) {
        super(props);
        console.log('ParentComponent: state');
        this.state = { text: '' };
        this.onInputChange = this.onInputChange.bind(this);
    }
    //...
    componentDidCatch(err, errorInfo) {  ⇽--- 将componentDidCatch方法添加到父组件中并用它更新组件状态
        console.log('componentDidCatch');
        console.error(err);
        console.error(errorInfo);
        this.setState(() => ({ err, errorInfo }));
    }
    render() {
        console.log('ParentComponent: render');
        if (this.state.err) {  ⇽--- 如果抛出错误，就显示该错误和错误信息
            return (
                <details style={{ whiteSpace: 'pre-wrap' }}>
                    {this.state.error && this.state.error.toString()}  ⇽--- 如果抛出错误，就显示该错误和错误信息
                    <br />
                    {this.state.errorInfo.componentStack}  ⇽--- 如果抛出错误，就显示该错误和错误信息
                </details>
            );
        }
        return [
            <h2 key="h2">Learn about rendering and lifecycle methods!</h2>,
            <input key="input" value={this.state.text}
    onChange={this.onInputChange} />,
            <ChildComponent key="ChildComponent" name={this.state.text} />
        ];
    }
}
render(<ParentComponent />, document.getElementById('root'));

至此，我们已经了解React提供的不同生命周期方法并了解在各种情况下如何使用它们。如果这看起来好像要关注很多方法，那么了解到这些方法构成了React组件API的绝大部分（也可以将表4-1当作速查表）就让人放心了。到目前为止，React核心API并没有超出我们所讨论的范围。更重要的是，不是必须使用所有这些方法，使用需要的方法即可。表4-1展示了到目前为止所涉及方法的概要（注意，没有包含 render ）。

表4-1　React组件生命周期方法小结

Previous 上一篇本节目录 Next 下一篇

16-捕捉错误

4.2.7 捕捉错误

4.2.7　捕捉错误