面试题：React使用Hook管理路由状态之复杂场景处理

运用Hook管理复杂路由状态

useReducer：
- 数据加载与更新逻辑：可以通过useReducer来管理复杂的数据加载和状态更新逻辑。例如，定义一个reducer函数来处理从列表页到详情页的数据获取和状态更新。假设状态包含详情数据detailData和全局缓存状态globalCache，可以这样定义reducer：

const reducer = (state, action) => {
    switch (action.type) {
        case 'FETCH_DETAIL_SUCCESS':
            return {
               ...state,
                detailData: action.payload,
                globalCache: {
                   ...state.globalCache,
                    // 根据详情数据更新全局缓存的逻辑
                }
            };
        case 'FETCH_DETAIL_FAILURE':
            return {
               ...state,
                error: action.error
            };
        default:
            return state;
    }
};

在组件中使用：在路由切换相关的组件（如详情页组件）中使用useReducer：

import React, { useReducer } from'react';

const DetailPage = () => {
    const [state, dispatch] = useReducer(reducer, {
        detailData: null,
        globalCache: {},
        error: null
    });

    React.useEffect(() => {
        // 模拟数据获取
        fetch('/api/detail')
          .then(response => response.json())
          .then(data => {
                dispatch({ type: 'FETCH_DETAIL_SUCCESS', payload: data });
            })
          .catch(error => {
                dispatch({ type: 'FETCH_DETAIL_FAILURE', error });
            });
    }, []);

    return (
        // 渲染详情页内容，根据state中的detailData和globalCache等状态
    );
};

export default DetailPage;

useContext：
- 创建上下文：创建一个上下文来共享全局状态，特别是全局缓存状态。这样不同层级的组件都可以访问和更新全局缓存，而不需要通过层层传递props。

import React from'react';

const GlobalContext = React.createContext();

export default GlobalContext;

提供上下文：在应用的顶层组件（如App组件）中提供上下文：

import React from'react';
import GlobalContext from './GlobalContext';

const App = () => {
    const [globalCache, setGlobalCache] = React.useState({});
    return (
        <GlobalContext.Provider value={{ globalCache, setGlobalCache }}>
            {/* 路由相关组件 */}
        </GlobalContext.Provider>
    );
};

export default App;

使用上下文：在需要更新全局缓存状态的组件（如详情页组件）中使用上下文：

import React, { useContext } from'react';
import GlobalContext from './GlobalContext';

const DetailPage = () => {
    const { globalCache, setGlobalCache } = useContext(GlobalContext);
    // 在更新详情数据时，同时更新全局缓存
    const updateGlobalCache = (newData) => {
        setGlobalCache({
           ...globalCache,
            // 根据newData更新全局缓存的逻辑
        });
    };
    return (
        // 渲染详情页内容
    );
};

export default DetailPage;

可能遇到的性能问题及解决方案

性能问题：
- 不必要的重新渲染：在使用useContext时，如果上下文值中的对象或数组没有正确处理，可能会导致依赖上下文的组件不必要的重新渲染。例如，每次更新globalCache时都创建一个新的对象，即使内容没有变化，依赖globalCache的组件也会重新渲染。
- 数据获取重复：如果在多个组件中都有相同的数据获取逻辑（例如，多个路由组件都需要获取相同的全局缓存数据），可能会导致数据获取重复，影响性能。
解决方案：
- 使用React.memo和useCallback：对于依赖上下文的组件，可以使用React.memo进行包裹，并且在传递给子组件的函数（如updateGlobalCache）使用useCallback进行包裹，以防止不必要的重新渲染。

import React, { useContext, useCallback } from'react';
import GlobalContext from './GlobalContext';

const DetailPage = React.memo(() => {
    const { globalCache, setGlobalCache } = useContext(GlobalContext);
    const updateGlobalCache = useCallback((newData) => {
        setGlobalCache({
           ...globalCache,
            // 根据newData更新全局缓存的逻辑
        });
    }, [globalCache, setGlobalCache]);
    return (
        // 渲染详情页内容
    );
});

export default DetailPage;

数据缓存和共享：可以使用类似redux - saga或自定义的缓存机制来避免重复的数据获取。例如，在获取详情数据时，先检查全局缓存中是否已经有该数据，如果有则直接使用，而不是再次发起请求。也可以使用react - query等库，它可以自动管理数据的缓存和更新，减少重复请求。

星途面试题库

面试题：React使用Hook管理路由状态之复杂场景处理

知识考点

面试题答案

运用Hook管理复杂路由状态

可能遇到的性能问题及解决方案