何时使用错误边界？

react项目中，出现没有被捕获的错误会使整个dom树卸载，使得整个页面白屏，为了预防这种情况发生，使用错误边界处理可能出现这种情况的ui组件。

方式一：手写边界组件

export default class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 呈现发生错误后的组件return { hasError: true };}componentDidCatch(error, errorInfo) {// 捕获错误，打印错误内容console.log(error, errorInfo);}render() {const { hasError }: any = this.state;const { children } = this.props;if (hasError) {return 
出现错误啦，请解决
;}return children;}
}

使用方式：将可能会出现错误的组件包裹（后代可以是函数组件）

注意 ：

1. 只有类组件有解决错误边界的办法，getDerivedStateFromError是类组件的静态方法
2. 边界组件只能捕获子组件及其后代的错误
3. 不会捕获异步代码，事件处理，服务端渲染的错误

方式二：借助第三方库 react-error-boundary

react-error-boundary

  提供了重试机制，并且能够捕获所有的错误，

1. 调用resetErrorBoundary能够重置发生错误的组件内部状态
2. 使用useErrorHandler()中的handleError能够在react生命周期中重新将事件处理，异步代码中的错误抛出，以便于最近的ErrorBoundary可以捕获他

import { ErrorBoundary} from 'react-error-boundary';export default function ErrorFallback({ error, resetErrorBoundary }: any) {return (
Something went wrong:
{error.message}
Try again);
}

import { useErrorHandler } from 'react-error-boundary';const handleError = useErrorHandler();const handleClick = () => {const err = new Error('💥 CABOOM 💥');handleError(err);throw err;};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！