React-错误边界与组件通信方式概述

错误边界

错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面。

注意:只在生产环境(项目上线)起效

特点:

  • 只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
  • 简单理解就是只能捕获后代组件生命周期钩子里面代码的错误
import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {
  state = {
    //用于标识子组件是否产生错误
    hasError: '',
  }

  // 当子组件出现错误,会触发调用,并携带错误信息
  static getDerivedStateFromError(error) {
    // render 之前触发
    // 返回新的 state
    return { hasError: error }
  }

  componentDidCatch(error, info) {
    console.log(error, info)
    console.log('此处统计错误,反馈给服务器')
  }

  render() {
    return (
      

Parent组件

{this.state.hasError ?

网络不稳定,稍后再试

: }
) } }

注意

错误边界目前只在 Class Component 中实现了,没有在 hooks 中实现(因为Error Boundaries的实现借助了this.setState可以传递callback的特性,useState无法传入回调,所以无法完全对标);

错误边界 无法捕获 以下四种场景中产生的错误:

  • 事件处理函数(因为 Error Boundaries 实现的本质是触发更新,但是事件处理函数不在render或者commit阶段,所以无法进行捕获,如果你需要在事件处理器内部捕获错误,可以使用原生的 try / catch 语句)
  • 异步代码(例如 setTimeoutrequestAnimationFrame 回调函数)
  • 服务端渲染(因为触发更新只能在客户端进行,不能在serve端进行)
  • 它自身抛出来的错误(因为错误抛出要向父节点冒泡寻找 Error Boundaries 处理,无法处理自身产生的错误)

组件通信方式总结

  • props
  • 消息订阅发布:pubs-sub
  • 集中管理:Redux、dva 等
  • conText

推荐搭配:

  • 父子组件:props
  • 兄弟组件:消息订阅-发布、集中式管理
  • 祖孙组件(跨级组件):消息订阅-发布、集中式管理、conText(开发用的少,封装插件用的多即 React-Redux)

你可能感兴趣的:(React,react.js,javascript,ecmascript)