React中的错误边界

在平时写代码中，我们不可避免的会出现各种错误，如果是在开发环境下碰到的错误还好，就怕是在生产环境中出现错误，特别是这个错误是后台返回的数据不对造成的。

例如我前端需要遍历一个列表，用循环，然后某一天，后台炸了，给我返回了null，那我前端用循环去遍历，那，页面就炸了。

这种页面崩溃，屏幕一堆乱七八糟的爆红，如果给用户看到的话，会非常影响体验的，那么我们该怎么解决呢？

错误边界

简单来说，所谓的错误边界，就是错误的影响范围。例如下面的例子

<Parent>
    <Child />
</Parent>

如果Child组件里出现了错误，那么，这个Child它所在的区域，就是错误边界

我们的某个组件发生错误了，不应该让整个页面都崩溃，而应该是哪个组件炸了，就不显示它，或者用别的东西来替代这个组件进行展示。

例如下面的伪代码

<Parent>
    {
        Child组件是否报错 ? <h1>你的网络太慢，请稍后重试</h1> : <Child />
    }
</Parent>

如果我们能这么处理的话，页面就不会整个崩掉了，只有Child所在的区域会受到影响，其他区域仍然正常运行。

用法

我们可以借助下面2个方法来完成错误边界的处理

getDerivedStateFromError
componentDidCatch

使用方式

import React, { Component } from 'react';

class Parent extends Component {
	state = {
		data: null,
		childIsError: false,
	};

	static getDerivedStateFromError(error) {
		// 只要子组件发生错误，都会触发这个静态方法
		console.log('子组件发生错误', error);
		return { childIsError: true };
	}

	componentDidCatch(error, info) {
		// 在这里我们通常是发送错误信息给后台进行一个错误统计
		console.log(error, info);
	}

	render() {
		return (
			<div>
				<h1>这是父组件Parent</h1>
				{this.state.childIsError ? (
					<h1>您的网络出现问题, 请稍后再试</h1>
				) : (
					<Child data={this.data} />
				)}
			</div>
		);
	}
}

class Child extends Component {
	render() {
		let { data } = this.props;
		return (
			<div>
				<h2>这是子组件Child</h2>
				{data.map((item, index) => (
					<p key={index}>{item}</p>
				))}
			</div>
		);
	}
}

export default Parent;

核心代码

上面的代码中，核心错误处理就是这2个东西

static getDerivedStateFromError(error) {
    // 只要子组件发生错误，都会触发这个静态方法
    console.log('子组件发生错误', error);
    return { childIsError: true };
}

componentDidCatch(error, info) {
    // 在这里我们通常是发送错误信息给后台进行一个错误统计
    console.log(error, info);
}

方法说明

getDerivedStateFromError 是一个静态方法，并且它必须有返回值，且必须是一个状态对象或者null，你如果返回null则它什么都不做，如果你返回的是一个对象，则会对你的state进行更新。

其他说明

错误边界必须在父组件中定义，且只能捕获到后台组件的错误，不能捕获自身的错误
componentDidCatch 不是必须的，你不想写的话也可以不写