每当你的react应用在任何react功能或类组件中遇到任何javascript错误时，都会破坏整个应用，这对你的终端用户来说是一种糟糕的体验。React 16 引入了错误边界 ，以摆脱你的应用程序中的这种糟糕体验。有了错误边界 ，你现在可以优雅地处理并让用户知道，每当你的应用程序遇到错误时，就会出现问题。
在这篇文章中，我们将学习如何通过实现错误边界来处理这些错误 ，并看看它们的作用。
首先，在vs code或任何其他IDE中创建一个新的react应用程序，我个人更喜欢VS Code。
错误边界也是反应组件，它可以帮助你捕捉被错误边界包裹的组件中的错误，并显示一个回退 UI（当捕捉到错误时显示的UI，而不是崩溃的应用程序）。
错误边界可以捕捉
错误边界不能捕捉
要使一个类组件成为错误边界组件，你只需要定义**静态的getDerivedStateFromError()和componentDidCatch()**生命周期方法。
让我们创建一个新的类组件并使其成为一个错误边界，让我们滚动
export default class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
// use lifecycle to catch errors in any components below and re-render fallback UI
this.setState({
error: error,
errorInfo: errorInfo,
});
}
render() {
if (this.state.errorInfo) {
// Fallback UI
return (
<div>
<h2>Something went wrong.</h2>
<details style={{ whiteSpace: "pre-wrap" }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
// without error render normally in happy flow
return this.props.children;
}
}
现在我们可以用错误边界来包装我们的整个应用程序，或者包装我们的子组件，以便在特定的组件上显示后退的用户界面，让我们看看这个动作吧
// Wrapping child component <ErrorBoundary> <ComponentThatThrowsError /> </ErrorBoundary>
// Wrapping our entire application <ErrorBoundary> <App /> </ErrorBoundary>
让我们在useEffect中抛出一个错误，看看我们的错误边界是否能抓住。
const ComponentThatThrowsError = () => {
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter === 5) {
throw new Error("Something went wrong");
}
}, [counter]);
return (
<div>
<p>Parent Component Counter</p>
<button
className="btn"
onClick={() => {
setCounter(counter + 1);
}}
>
{counter}
</button>
</div>
);
};
当计数器的值等于5时，我们就抛出了一个错误。
我们可以看到，一旦子组件的计数器达到5，应用程序就会为该组件渲染回退的用户界面，而当主错误边界捕捉到一个错误时，它就会渲染出白色的屏幕，显示出出错的情况。
我们在这一章中讲了很多，我希望这对你来说不算太多。你学到了如何创建错误边界，以及为什么和在哪里使用它们。它们如何使你的应用程序的体验更好。
