ReactJS (16) 中的错误边界是什么？

渲染期间的运行时错误可能会使应用程序处于损坏状态。 React 基本上卸载了洞反应组件树。如果我们能在它们的任何地方发现错误，那就太好了 组件树，记录这些错误，并显示一个备用 UI。这是错误边界成为焦点的地方。实现一个或两个生命周期方法的类组件static getDerivedStateFromError()或 componentDidCatch()成为错误边界。静态 getDerivedStateFromError()用于在抛出错误后呈现回退 UI。 componentDidCatch()用于记录错误信息。

错误边界不会捕获以下错误：

• 事件处理程序
• 异步代码（例如 setTimeout 或网络请求）
• 服务器端渲染
• 在错误边界本身（而不是其子项）中引发的错误

让我们看一个不使用错误边界的例子。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app error-boundary-demo

第 2 步：创建项目文件夹后，即error-boundary-demo ，使用以下命令移动到该文件夹：

cd error-boundary-demo

第 3 步：创建一个目录并将其命名为Component 。

mkdir Component

项目结构：它将如下所示。

第 4 步：在这一步中，我们将创建HeroViewar组件来打印英雄的名字。如果英雄的名字是'Joker' ，这个组件会抛出一个错误。创建HeroViewar.js 在Component目录中并写下以下代码。

HeroViewar.js

import React from 'react'
  
const HeroViewar = ({name}) => {
  
    // Throw an error if not hero
    if(name === "Joker")
        throw new Error("Not a Hero!")
    return(
        
{name}
    )
}
  
export default HeroViewar

第 5 步：在这一步中，我们将从HeroViewar.js 中导入 HeroViewar以打印一些英雄的名字。将英雄的名字作为 prop 传递给HeroViewar组件。在App.js文件中写下以下代码。

应用程序.js

import React from 'react'
import HeroViewar from './Component/HeroViewar'
  
const App = () => {
  return (
    <>
      
      
      
    
  )
}
  
export default App

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

解释：我们的英雄名字之一是'Joker' ，这就是HeroViewar抛出错误的原因。如果您现在查看浏览器，您将看到整个应用程序崩溃。显然，这并不好。我们想要的是，如果某个特定组件抛出错误，那么只有该组件应该回退到 UI 中，而其余组件应该不受影响。

第 6 步：为了克服上述问题，React 16 引入了“错误边界”的新概念。错误边界在其组件树中的任何位置捕获错误，并显示回退 UI。让我们添加它。在Component目录中创建ErrorBoundary.js并记下以下代码。

错误边界.js

import React, { Component } from 'react'
  
class ErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = { hasError: false }
    }
      
    static getDerivedStateFromError(error){
  
        // Update state so the next render
        // will show the fallback UI.
        return { hasError: true }
    }
  
    componentDidCatch(error, errorInfo) {
  
        // You can also log the error to
        // an error reporting service
        console.log(error, errorInfo)
    }
  
    render() {
        if (this.state.hasError) {
  
          // You can render any custom fallback UI
          return 
Something went wrong!
        }    
        return this.props.children 
      }
}
  
export default ErrorBoundary

第 7 步：更新App.js以使用ErrorBoundary包装每个HeroViewar ，例如：

将以下代码写入App.js

应用程序.js

import React from 'react'
import ErrorBoundary from './Component/ErrorBoundary'
import HeroViewar from './Component/HeroViewar'
  
const App = () => {
  return (
    <>
    
      
    
    
      
    
    
      
    
    
  )
}
  
export default App

输出：