面试题：优化useReducer在大型应用中的性能

可能导致性能问题的原因

不必要的重新渲染：当useReducer的dispatch触发状态更新时，如果组件依赖了全局状态，即使状态变化与该组件无关，该组件也可能重新渲染。例如，在一个多层嵌套的组件结构中，某个深层组件仅依赖部分全局状态，但全局状态任何部分的变化都可能导致它重新渲染。
计算成本高：reducer函数中的计算逻辑复杂，每次状态更新都要进行大量计算。比如在处理复杂业务逻辑时，需要遍历庞大的数组或对象进行数据处理。
状态粒度问题：全局状态过于庞大，包含了许多关联度不高的数据，使得状态更新时波及范围过大。

优化方案

使用Memoization（记忆化）
- 原理：通过缓存计算结果，避免重复计算，减少性能开销。
- 具体实现思路：
  - 对于reducer中的复杂计算，使用useMemo来缓存计算结果。例如，如果reducer中有一个函数用于处理庞大数组的计算，在调用这个函数前可以这样写：

const result = useMemo(() => {
    // 复杂数组计算逻辑
    let sum = 0;
    for (let i = 0; i < largeArray.length; i++) {
        sum += largeArray[i];
    }
    return sum;
}, [largeArray]);

    - 对于组件，可以使用`React.memo`来包裹。这会对组件的props进行浅比较，如果props没有变化，组件不会重新渲染。例如：

const MyComponent = React.memo((props) => {
    // 组件逻辑
    return <div>{props.value}</div>;
});

拆分状态管理
- 原理：将庞大的全局状态拆分成多个较小的状态，每个状态使用单独的useReducer管理，减少状态更新时的波及范围，从而降低不必要的重新渲染。
- 具体实现思路：
  - 分析应用中不同功能模块所依赖的状态，将相关状态归为一组。例如，在一个电商应用中，可以将用户相关状态（如登录信息、用户偏好等）和购物车相关状态（商品列表、总价等）分开。
  - 为每个状态组创建单独的useReducer。以用户状态为例：

// 用户状态reducer
const userReducer = (state, action) => {
    switch (action.type) {
        case 'LOGIN':
            return {...state, isLoggedIn: true, userInfo: action.payload };
        case 'LOGOUT':
            return {...state, isLoggedIn: false, userInfo: null };
        default:
            return state;
    }
};

// 使用userReducer
const [userState, userDispatch] = useReducer(userReducer, {
    isLoggedIn: false,
    userInfo: null
});

    - 购物车状态同理：

// 购物车状态reducer
const cartReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return [...state, action.payload];
        case 'REMOVE_FROM_CART':
            return state.filter(item => item.id!== action.payload.id);
        default:
            return state;
    }
};

// 使用cartReducer
const [cartState, cartDispatch] = useReducer(cartReducer, []);

使用Selector（选择器）
- 原理：通过选择器函数，精确获取组件真正需要的状态部分，而不是整个全局状态，减少不必要的重新渲染。
- 具体实现思路：
  - 定义选择器函数，例如：

const selectUserInfo = state => state.userInfo;
const selectCartTotal = state => state.cart.reduce((total, item) => total + item.price, 0);

    - 在组件中使用选择器，结合`useSelector`（如果使用了像Redux - Toolkit这样支持`useSelector`的库）：

import { useSelector } from'react-redux';

const UserInfoComponent = () => {
    const userInfo = useSelector(selectUserInfo);
    return <div>{userInfo.name}</div>;
};

const CartTotalComponent = () => {
    const cartTotal = useSelector(selectCartTotal);
    return <div>Total: ${cartTotal}</div>;
};

这样当全局状态中其他部分变化时，只要选择器所依赖的状态部分没有变化，组件就不会重新渲染。

星途面试题库

面试题：优化useReducer在大型应用中的性能

知识考点

面试题答案

可能导致性能问题的原因

优化方案