面试题：React错误边界在复杂应用架构下与全局状态管理的协作优化

可能遇到的问题

组件卸载时的问题：
- 错误边界在组件卸载时捕获错误，可能导致不必要的错误提示。因为组件卸载可能是正常的业务流程，例如用户切换页面导致某个组件卸载。此时捕获的错误可能并非真正的程序错误，而是与卸载相关的预期行为，这会给调试带来干扰。
异步操作的问题：
- 异步任务中的错误难以捕获：React 错误边界只能捕获其子组件树渲染、生命周期方法和构造函数中的错误。对于异步操作（如 setTimeout、fetch 等）中的错误，错误边界无法直接捕获。如果这些异步错误未处理，可能会导致全局错误，影响应用的稳定性。
- 异步任务完成后组件已卸载：当异步操作完成时，相关组件可能已经卸载。此时如果将错误信息设置到全局状态，可能会引发内存泄漏或导致在已卸载组件上执行操作，从而产生运行时错误。
内存泄漏问题：
- 事件监听未移除：错误边界组件在捕获错误时，可能会添加一些事件监听器来处理错误相关逻辑。如果在组件卸载时没有正确移除这些事件监听器，就会导致内存泄漏。例如，为了获取更多错误信息，在错误边界组件中为 window 对象添加了 error 事件监听器，但在组件卸载时未移除。
- 引用未释放：错误边界可能持有对一些对象或组件的引用。如果在组件卸载时这些引用没有被正确释放，其他部分的代码可能仍然持有对已卸载组件的引用，从而导致内存泄漏。

解决方法

针对组件卸载时的问题：
- 添加额外逻辑判断：在错误边界的 componentDidCatch 方法中，可以添加逻辑判断是否是组件卸载导致的错误。例如，可以通过记录组件的卸载状态来判断。在组件即将卸载时（componentWillUnmount）设置一个标志位，在 componentDidCatch 中检查这个标志位，如果是卸载导致的错误，则不进行错误处理或进行特殊处理，避免不必要的错误提示。
针对异步操作的问题：
- 包装异步操作：将异步操作（如 fetch、setTimeout 等）进行包装，手动捕获错误并将其传递给错误边界或全局状态管理。例如，对于 fetch 操作，可以封装一个函数：

function safeFetch(url) {
    return fetch(url).catch(error => {
        // 这里可以将错误传递给全局状态管理，如MobX的store
        // 假设存在一个mobx store名为errorStore
        errorStore.setError(error);
        throw error;
    });
}

使用 Promise.allSettled：当有多个异步任务时，使用 Promise.allSettled 可以确保即使某个异步任务失败，其他任务仍能继续执行，并且可以统一处理所有任务的结果（包括错误）。这样可以更好地控制异步操作中的错误，避免未处理的错误影响全局。
检查组件卸载状态：在异步操作完成回调中，检查相关组件是否已经卸载。可以使用 useRef 来记录组件的挂载状态，在组件挂载时设置为 true，卸载时设置为 false。在异步回调中检查这个状态，如果组件已卸载，则不进行设置全局状态等可能导致错误的操作。

import React, { useRef, useEffect } from'react';

const MyComponent = () => {
    const isMounted = useRef(true);
    useEffect(() => {
        return () => {
            isMounted.current = false;
        };
    }, []);

    const asyncOperation = () => {
        setTimeout(() => {
            if (isMounted.current) {
                // 设置全局状态等操作
            }
        }, 1000);
    };

    return <button onClick={asyncOperation}>触发异步操作</button>;
};

针对内存泄漏问题：
- 移除事件监听：在错误边界组件的 componentWillUnmount 方法中，移除在 componentDidCatch 或其他地方添加的所有事件监听器。例如，如果在 componentDidCatch 中为 window 添加了 error 事件监听器：

class ErrorBoundary extends React.Component {
    componentDidCatch(error, errorInfo) {
        window.addEventListener('error', this.handleGlobalError);
    }

    componentWillUnmount() {
        window.removeEventListener('error', this.handleGlobalError);
    }

    handleGlobalError = (event) => {
        // 处理全局错误逻辑
    }

    render() {
        return this.props.children;
    }
}

释放引用：在组件卸载时，确保错误边界持有的所有对其他对象或组件的引用被释放。例如，如果错误边界持有一个对某个子组件实例的引用，在 componentWillUnmount 中将这个引用设置为 null。

class ErrorBoundary extends React.Component {
    childComponentRef = null;

    componentDidCatch(error, errorInfo) {
        this.childComponentRef = this.props.children;
    }

    componentWillUnmount() {
        this.childComponentRef = null;
    }

    render() {
        return this.props.children;
    }
}

通过上述方法，可以在引入错误边界的大型 React 应用中，更好地处理组件卸载、异步操作等复杂场景下的问题，保证错误信息能正确反映到全局状态中，并避免内存泄漏等问题。

星途面试题库

面试题：React错误边界在复杂应用架构下与全局状态管理的协作优化

知识考点

面试题答案

可能遇到的问题

解决方法