React错误边界Error Boundaries

首先 我们先构建出问题的场景

我们创建一个react项目

然后在src下创建 components 文件夹目录

在下面创建一个 error.jsx 组件

参开代码如下

import React from "react";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          { null.bingt }
      </div>
    )
  }
}

这时 就会有人说了 你这 null.bingt 不是摆明会报错吗？

没错 我们要的就是报错

找到src下的 App.js 编写代码如下

import './App.css';
import React from "react";
import Error from "./components/error";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          <span>你好</span>
          <Error/>
      </div>
    )
  }
}

运行之后 控制台直接报错 界面白屏 但其实 App组件上还有个你好啊 说明 整个项目都没渲染出来

直接白屏 版本低一点的react还会出现报错的专门的界面 但在上线之后 客户看到的就是一片空白

但我们想 因为一个组件报错 导致整个项目都运行不起来 这合理吗？

显然是不合理的

此时 我们可以在 components 目录下创建 ErrorBoundary.jsx组件

参考代码如下

import React from "react"
export default class ErrorBoundary extends React.Component{
    state = {
        hasError:false,
        error:null,
        errorInfo:null
    }
    componentDidCatch(error,errorInfo){
        this.setState({
            hasError:true,
            error:error,
            errorInfo:errorInfo
        })
    }
    render(){
        if(this.state.hasError){
            return <div>{ this.props.render(this.state.error,this.state.errorInfo) }</div>
        }
        return this.props.children;
    }
}

此时 我们的一个捕获错误的组件就写好了

然后 改写 src下的 App.js

代码如下

import './App.css';
import React from "react";
import Error from "./components/error";
import ErrorBoundary from "./components/ErrorBoundary";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          <span>你好</span>
          <ErrorBoundary render ={ (error,errorInfo) => <p>{ '加载时发生错误' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}

此时 我们将ErrorBoundary捕获报错的组件 套在了Error外面

然后 编写 当报错时 就渲染

{ ‘加载时发生错误’ }

运行结果如下

控制台依旧会输出报错信息 但 将不会运行到其他组件的渲染 而且 我们指定报错后 渲染的

{ ‘加载时发生错误’ }

也成功渲染出来了

就是 之后我们指定可能某个组件 会报错 就可以用这个组件套一下 避免一个组件报错 整个项目白屏的情况

到此这篇关于React错误边界Error Boundaries的文章就介绍到这了,更多相关React错误边界内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React之错误边界 Error Boundaries示例详解

    目录 引言 注意 实现 错误边界应该放置在哪? 未捕获错误(Uncaught Errors)该如何处理? 注意:自 React 15 的命名更改 引言 过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误.但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复. 默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果. 部分组件的错误不应该导致整个应用崩溃.为了解决这个问题,React 16

  • React错误边界Error Boundaries详解

    目录 错误边界(Error Boundaries) 概述 错误边界无法捕获以下场景中的错误 渲染备用UI-static getDerivedStateFromError() 打印错误信息-componentDidCatch() 打印错误信息并渲染备用UI 错误边界(Error Boundaries) 概述 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界. 是React组件,可以捕获并打印发生在其子组件树任何

  • React错误边界Error Boundaries

    首先 我们先构建出问题的场景 我们创建一个react项目 然后在src下创建 components 文件夹目录 在下面创建一个 error.jsx 组件 参开代码如下 import React from "react"; export default class App extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( <div>

  • React 错误边界Error Boundary使用示例解析

    目录 我们为什么需要错误边界 如何使用错误边界组件 使用错误边界需要注意什么 我们为什么需要错误边界 在React组件中可能会由于某些JavaScript错误,导致一些无法追踪的错误,导致应用崩溃.部分 UI 的 JavaScript 错误不应该导致整个应用崩溃.为此,React引入了错误边界(Error Boundary)的概念:可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树. 而在React16以后,未捕

  • React 错误边界组件的处理

    React 错误边界组件的处理

    这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下- React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载.从 React16 开始就是这样.但是同时React也引入了一个新的概念--错误边界. 定义,是什么 错误边界仍然是一种组件,可以捕获(打印或者其他方式)处理该组件的子组件树任何位置的 JavaScript 错误,并根据需要渲染出备用UI. 工作方式类似于try-catch,但是错误边界只用于 Rea

  • React工作流程及Error Boundaries实现过程讲解

    目录 什么是Error Boundaries 步骤1:捕获错误 步骤2:构造callback 执行callback 总结 这里简单讲解下React工作流程,后文有用.分为三步: 触发更新 render阶段:计算更新会造成的副作用 commit阶段:在宿主环境执行副作用 副作用有很多,比如: 插入DOM节点 执行useEffect回调 好了,让我们进入主题. 什么是Error Boundaries React提供了两个与错误处理相关的API: getDerivedStateFromError:静态

  • react进阶教程之异常处理机制error Boundaries

    react进阶教程之异常处理机制error Boundaries

    目录 Error Boundaries介绍 ComponentDidCatch 参数 触发error boundaries后程序要走向哪里? 对于不能捕获的错误的新处理方式 在堆中跟踪component try/catch 如何? Event Handlers怎么样? React 15后的函数命名改变 总结 该文章翻译自官网 https://reactjs.org/docs/error-boundaries.html 该文章包含以下内容: 1.Error Boundaries介绍 2.Compo

  • React中Portals与错误边界处理实现

    目录 Portals 错误边界处理 如果没有使用错误边界会怎样? 注意点 Portals 可以说是 插槽,但 不同于 Vue 中的 slot,它指的是将一个 React 元素渲染到指定的容器 (真实 DOM) 中 比如说,Modal 组件一般默认直接作为 body 的真实结构的子元素渲染出来,那么我们就可以借助 ReactDOM.createPortal(ReactElement, RealDOM container) 创建一个 React 元素,示例代码: import React from

  • 前端项目中的Vue、React错误监听

    目录 一. Vue 错误监听 window.onerror errorCaptured 生命周期 errorHandler 异步错误 答案 扩展 二.React 错误监听 ErrorBoundary dev 和 build 事件报错 异步错误 答案 扩展 一. Vue 错误监听 题目: 如何统一监听 Vue 组件报错? 分析: 真实项目需要闭环,即考虑各个方面,除了基本的功能外,还要考虑性能优化.报错.统计等. 而个人项目.课程项目一般以实现功能为主,不会考虑这么全面.所以,没有实际工作经验的同

  • ThinkPHP提示错误Fatal error: Allowed memory size的解决方法

    本文实例讲述了ThinkPHP提示错误Fatal error: Allowed memory size的解决方法.分享给大家供大家参考.具体分析如下: 如果你的ThinkPHP提示你:致命错误(Fatal error: Allowed memory size),根据网上说的提高服务器可使用内存,我觉得都不是好的解决办法.麻烦也没必要.因为这是ThinkPHP本身存在BUG. 错误提示:Fatal error: Allowed memory size of 1073741824 bytes exh

  • PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法

    今天在写PHP程序的时候总是出现这样的错误:Parse error: syntax error, unexpected end of file in *.php on line *,然后我就根据提示,找到那个文件,然后错误中总是提示最后一行出错,我找到最后一行发现是</html>,晕的,这能有什么错误,找了好久才找到问题所在,拿来分享. 出现这个错误的原因就是语法错误,肯定是PHP程序的书写不规范造成,我后来一条一条看才发现,原来是PHP语句标识符错了,正常情况下应该是这样的:<?php

随机推荐