React - 错误边界(Error boundary)

React - 错误边界(Error boundary)

错误边界:https://zh-hans.reactjs.org/docs/error-boundaries.html

一. 理解

  1. 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界
  2. 错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。
  3. 简单理解:用来捕获后代组件错误,渲染出备用页面
  4. 错误边界的工作方式类似于 JavaScript 的 catch {},不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。
  5. 错误边界仅可以捕获其子组件的错误,它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息,则错误会冒泡至最近的上层错误边界,这也类似于 JavaScript 中 catch {} 的工作机制。

二. 使用

1. 使用方式

使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息。

state = { hasError: "" };
static getDerivedStateFromError(error) {
	console.log(error);
	// 在render之前触发,返回新的state
	return {
		hasError: true,
	};
}

componentDidCatch(error, info) {
	console.log(error, info);
}

2. 使用案例

  • Parent.jsx (父组件)

    不过子组件的错误,渲染出备用提示页面

    import React, { Component } from "react";
    import Child from "./Child";
    
    export default class Parent extends Component {
      state = { hasError: "" };
      // 如果该组件的子组件出现报错时,会触发 getDerivedStateFromError 生命周期钩子,并携带错误信息
      static getDerivedStateFromError(error) {
        return { hasError: error };
      }
      // 如果该组件的子组件出现报错时,捕捉抛出的异常
      componentDidCatch(error, info) {
        console.log("渲染组件时,发生错误!", error, info);
      }
      render() {
        return (
          <div>
            <h2>Parent组件</h2>
            {this.state.hasError ? (
              //也可以是组件页面
              <h2>当前网络不稳定,请稍后重试!</h2>
            ) : (
              <Child />
            )}
          </div>
        );
      }
    }
    
  • Child.jsx (子组件)

    正确情况 persons 参数是一个 [{id:0,name:"小明",age:18}] 数组形式,当前渲染的 persons 参数是一个字符串形式,页面渲染发生错误。

    import React, { Component } from "react";
    
    export default class Child extends Component {
      state = {
        persons: "abc",
        // persons: [
        //   {
        //     id: 1,
        //     name: "小明",
        //     age: 18,
        //   },
        //   {
        //     id: 2,
        //     name: "小丽",
        //     age: 19,
        //   },
        //   {
        //     id: 3,
        //     name: "小亮",
        //     age: 20,
        //   },
        // ],
      };
      render() {
        return (
          <div>
            <h2>Child组件</h2>
            {this.state.persons.map((person) => {
              return (
                <div key={person.id}>
                  {person.name}——{person.age}
                </div>
              );
            })}
          </div>
        );
      }
    }
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值