React.js 错误边界
错误边界：错误边界基本上提供了某种边界或对错误的检查，它们是 React 组件，用于处理其子组件树中的 JavaScript 错误。
React 组件在其子组件树的任何位置捕获 JavaScript 错误、记录这些错误并显示回退 UI。它在渲染期间、生命周期方法等中捕获错误。
使用理由：假设组件内部的 JavaScript 有一个错误，然后它会破坏 React 的内部状态并导致它发出神秘的错误。错误边界有助于消除这些错误并改为显示后备 UI（这意味着显示代码中出现问题的错误）。
工作原理：错误边界的工作原理与 JavaScript 中的 catch 几乎相似。假设遇到错误，那么一旦在渲染或生命周期方法中出现损坏的 JavaScript 部分，它就会尝试找到最近的错误边界标记。
创建反应应用程序：
第 1 步：使用以下命令创建一个 React 应用程序：
create-react-app error-boundary第2步：创建错误边界目录后移动到它。
cd error-boundary项目结构：它将如下所示。
示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
文件名：App.js
Javascript
import React from "react";
class ErrorBoundary extends React.Component {
// Constructor for initializing Variables etc in a state
// Just similar to initial line of useState if you are familiar
// with Functional Components
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
// This method is called if any error is encountered
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and
// re-render with error message
this.setState({
error: error,
errorInfo: errorInfo
})
// You can also log error messages to an error
// reporting service here
}
// This will render this component wherever called
render() {
if (this.state.errorInfo) {
// Error path
return (
An Error Has Occured
{this.state.error && this.state.error.toString()}
{this.state.errorInfo.componentStack}
);
}
// Normally, just render children, i.e. in
// case no error is Found
return this.props.children;
}
}
// This is a component for Counter,Named Counter
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(({ counter }) => ({
counter: counter + 1
}));
}
render() {
if (this.state.counter === 3) {
// Simulate a JS error
throw new Error('Crashed!!!!');
}
return {this.state.counter}
;
}
}
function App() {
return (
To see the working of Error boundaries
click on the Counters to increase the value
Program is made such a way that as soon as the counter
reaches the value of 3, Error boundaries will throw an
error.
These two counters are inside the same error boundary.
If one crashes, then the effect will be done on both
as the error boundary will replace both of them.
These two counters are each inside of their
own error boundary. So if one crashes, the
other is not affected.
Javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
,
document.getElementById('root')
);
reportWebVitals();
文件名：index.js
Javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
,
document.getElementById('root')
);
reportWebVitals();
运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。
npm start输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。
说明：上述代码的编写方式是，如果计数器达到 3 的值，则错误边界将抛出错误。
如上面的代码所示，两个计数器包含在同一个错误边界组件中，如果它们中的任何一个通过达到 3 值而导致任何类型的错误，那么将提供详细消息而不是渲染它们中的任何一个屏幕。
在另一端，两个计数器下方都包含在单个错误边界组件中，通过该组件发生的情况只是不呈现导致错误的计数器，而其他计数器正常呈现。
错误边界不会捕获以下事件的错误：
- 事件处理程序
- 异步代码（示例请求动画帧等）
- 服务器端渲染
- 错误在错误边界本身（而不是其子项）中引发
Try/Catch：你可能会想到一个问题，因为错误边界就像 Catch 一样工作，为什么不直接使用 try/catch 以及为什么要学习这个新概念。好吧，答案是 try/catch 与命令式代码一起使用，但我们知道 React 本质上是声明性的，错误边界有助于保持 React 的声明性。
未捕获的更改：由于它在某些特定情况下不会捕获错误，那么那些未检查或未捕获的错误呢？从 React 16 开始，没有被任何错误边界捕获的错误将导致整个 React 组件树的卸载。这意味着在迁移到 React 16 并使用错误边界之后，您将能够提供更好的用户体验，因为现在用户将能够在意外崩溃之前看到原因，而不仅仅是猜测。
组件堆栈跟踪： React 16 打印发生的所有错误，它提供组件堆栈跟踪。这有助于用户识别发生错误的点。
事件监听器：错误边界不检查事件处理程序中的错误，所以这应该算作某种错误边界的限制，答案是否定的，原因是事件监听器在渲染过程中不会发生，所以如果导致任何错误由于它们，React 只会将其显示在屏幕上。
错误边界：
- 它只能与类组件一起使用。
- 它不会捕获事件处理程序、异步代码（示例请求动画帧）、服务器端渲染、 并且错误会在错误边界本身（而不是其子项）中引发。
- 它仅在 react 16 或之后可用。
参考： https://reactjs.org/docs/error-boundaries.html