面试题：复杂React应用中useErrorBoundary的优化策略

1. 避免重复捕获相同错误

合理定位ErrorBoundary：在多层嵌套组件结构中，不要在每个层级都放置useErrorBoundary。应根据组件的功能模块划分，将ErrorBoundary放置在具有独立业务逻辑单元的外层。例如，在一个电商应用中，商品展示模块、购物车模块、订单结算模块可以分别在外层设置ErrorBoundary，而不是在每个商品展示子组件、购物车项子组件等都设置。这样可以避免在子组件链中重复捕获同一错误。
利用错误标识：当捕获到错误时，可以为错误添加一个唯一标识（例如，生成一个随机的错误ID）。在useErrorBoundary的error处理函数中，检查这个标识。如果已经处理过带有该标识的错误，则不再重复处理。可以使用一个全局的集合（如Set）来记录已经处理过的错误标识。例如：

import React, { useErrorBoundary } from 'react';

const processedErrorIds = new Set();

const MyComponent = () => {
    const [error, errorInfo, resetErrorBoundary] = useErrorBoundary((error) => {
        const errorId = Math.random().toString(36).substr(2, 9);
        if (processedErrorIds.has(errorId)) {
            return;
        }
        processedErrorIds.add(errorId);
        // 处理错误逻辑
    });

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    return <div>正常内容</div>;
};

export default MyComponent;

2. 更高效地将错误信息传递到顶层进行统一处理

自定义事件机制：在捕获到错误时，通过自定义事件将错误信息向上传递。顶层组件可以监听这些自定义事件来统一处理错误。例如：

// 自定义事件发射器
const eventEmitter = {
    events: {},
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    },
    emit(eventName, ...args) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(...args));
        }
    }
};

const ChildComponent = () => {
    const [error, errorInfo, resetErrorBoundary] = useErrorBoundary((error) => {
        eventEmitter.emit('globalError', error);
    });

    return <div>子组件内容</div>;
};

const TopLevelComponent = () => {
    const handleGlobalError = (error) => {
        // 统一处理错误逻辑
    };

    React.useEffect(() => {
        eventEmitter.on('globalError', handleGlobalError);
        return () => {
            eventEmitter.off('globalError', handleGlobalError);
        };
    }, []);

    return (
        <div>
            <ChildComponent />
        </div>
    );
};

使用Context：通过React的Context将错误信息传递到顶层。创建一个ErrorContext，在useErrorBoundary捕获到错误时，将错误信息存入Context。顶层组件通过订阅Context的变化来统一处理错误。例如：

import React, { createContext, useContext, useErrorBoundary } from 'react';

const ErrorContext = createContext();

const ChildComponent = () => {
    const [error, errorInfo, resetErrorBoundary] = useErrorBoundary((error) => {
        const errorContext = useContext(ErrorContext);
        errorContext.setError(error);
    });

    return <div>子组件内容</div>;
};

const TopLevelComponent = () => {
    const [error, setError] = React.useState(null);

    const handleError = () => {
        // 统一处理错误逻辑
    };

    React.useEffect(() => {
        if (error) {
            handleError();
        }
    }, [error]);

    return (
        <ErrorContext.Provider value={{ error, setError }}>
            <ChildComponent />
        </ErrorContext.Provider>
    );
};

Redux或MobX等状态管理工具：利用状态管理工具来集中管理错误信息。当useErrorBoundary捕获到错误时，通过相应的action或mutation将错误信息存入状态管理工具的状态中。顶层组件监听状态变化，统一处理错误。以Redux为例：

// actions/errorActions.js
const setError = (error) => ({
    type: 'SET_ERROR',
    payload: error
});

// reducers/errorReducer.js
const initialState = {
    error: null
};

const errorReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_ERROR':
            return {
               ...state,
                error: action.payload
            };
        default:
            return state;
    }
};

// components/ChildComponent.js
import React, { useErrorBoundary } from'react';
import { useDispatch } from'react-redux';

const ChildComponent = () => {
    const dispatch = useDispatch();
    const [error, errorInfo, resetErrorBoundary] = useErrorBoundary((error) => {
        dispatch(setError(error));
    });

    return <div>子组件内容</div>;
};

// components/TopLevelComponent.js
import React from'react';
import { useSelector } from'react-redux';

const TopLevelComponent = () => {
    const error = useSelector(state => state.error.error);

    const handleError = () => {
        // 统一处理错误逻辑
    };

    React.useEffect(() => {
        if (error) {
            handleError();
        }
    }, [error]);

    return (
        <div>
            <ChildComponent />
        </div>
    );
};

星途面试题库

面试题：复杂React应用中useErrorBoundary的优化策略

知识考点

面试题答案

1. 避免重复捕获相同错误

2. 更高效地将错误信息传递到顶层进行统一处理