面试题：React错误边界与React Suspense的协同使用及场景分析

区别

错误处理范围：
- React错误边界：主要捕获其子组件树中JavaScript错误，包括渲染期间、生命周期方法和构造函数中的错误。它无法捕获异步代码（如setTimeout、Promise回调）中的错误，也不能捕获自身渲染的错误。例如：

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        // 记录错误
        console.log('Error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>Something went wrong.</div>;
        }
        return this.props.children;
    }
}

React Suspense：用于处理组件的加载状态，特别是处理异步数据获取或动态导入组件时的等待情况。它并不处理错误，而是处理加载中的“暂停”状态。例如：

const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <MyComponent />
        </React.Suspense>
    );
}

触发时机：
- React错误边界：当子组件树中发生符合其捕获范围的JavaScript错误时触发。
- React Suspense：在组件需要异步加载数据或动态导入组件时，在加载过程中触发，显示fallback内容。

联系

两者都旨在提升用户体验，错误边界处理意外错误，防止应用崩溃，Suspense处理预期的异步加载情况，避免用户看到“白屏”。
它们可以一起使用，共同处理应用中不同类型的异常情况，一个处理错误，一个处理加载。

同时使用场景及协同工作

业务场景：在一个电商应用中，商品详情页面需要从后端获取商品详细信息，同时在渲染过程中可能会因为数据格式问题等出现JavaScript错误。
代码示例：

const ProductDetails = React.lazy(() => import('./ProductDetails'));

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        console.log('Error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>There was an issue loading product details.</div>;
        }
        return (
            <React.Suspense fallback={<div>Loading product details...</div>}>
                <ProductDetails />
            </React.Suspense>
        );
    }
}

确保稳定性和用户体验：
- 错误处理方面：错误边界捕获子组件渲染、生命周期等错误，通过显示友好的错误提示，防止应用崩溃，确保用户不会看到空白或无响应界面。
- 加载处理方面：Suspense在组件异步加载时显示加载提示，让用户明确知道应用正在加载数据，提升等待过程中的体验。同时，在数据加载完成后，错误边界继续监控组件渲染等过程中的错误，两者协同确保应用的稳定性和用户体验。

星途面试题库

面试题：React错误边界与React Suspense的协同使用及场景分析

知识考点

面试题答案

区别

联系

同时使用场景及协同工作