面试题：React中useReducer Hook在复杂状态管理中的工作原理

useReducer在复杂状态管理场景下的作用

useReducer 是 React 提供的一种状态管理机制，类似于 Redux 中的 reducer 概念。在复杂状态管理场景下，它将状态更新逻辑抽取到一个单独的 reducer 函数中，使得状态更新逻辑更集中、可维护。通过这种方式，组件只负责派发动作（action），而由 reducer 函数根据动作来决定如何更新状态，从而分离了状态更新逻辑和组件本身，使代码结构更清晰。

与useState相比处理复杂状态的优势

逻辑集中：useState 在处理复杂状态变化时，逻辑可能会分散在组件的不同地方，导致代码难以维护。而 useReducer 将所有状态更新逻辑集中在 reducer 函数中，易于理解和修改。
可追溯性：useReducer 的 action 具有明确的类型和 payload，通过记录 action，可以方便地追溯状态变化历史，有助于调试和测试。
更好的复用：reducer 函数是纯函数，只依赖于传入的 state 和 action，因此可以在不同组件中复用相同的状态更新逻辑。

示例：使用useReducer管理复杂组件状态

假设我们有一个购物车组件，它包含商品列表、总价、折扣等多个子状态，且状态变化逻辑复杂。

import React, { useReducer } from 'react';

// 定义action类型
const ADD_ITEM = 'ADD_ITEM';
const REMOVE_ITEM = 'REMOVE_ITEM';
const APPLY_DISCOUNT = 'APPLY_DISCOUNT';

// reducer函数
const cartReducer = (state, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
      ...state,
        items: [...state.items, action.item],
        total: state.total + action.item.price
      };
    case REMOVE_ITEM:
      const newItems = state.items.filter(item => item.id!== action.item.id);
      return {
      ...state,
        items: newItems,
        total: state.total - action.item.price
      };
    case APPLY_DISCOUNT:
      return {
      ...state,
        discount: action.discount,
        total: state.total * (1 - action.discount)
      };
    default:
      return state;
  }
};

const ShoppingCart = () => {
  const initialState = {
    items: [],
    total: 0,
    discount: 0
  };
  const [state, dispatch] = useReducer(cartReducer, initialState);

  const addItem = (item) => {
    dispatch({ type: ADD_ITEM, item });
  };

  const removeItem = (item) => {
    dispatch({ type: REMOVE_ITEM, item });
  };

  const applyDiscount = (discount) => {
    dispatch({ type: APPLY_DISCOUNT, discount });
  };

  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {state.items.map(item => (
          <li key={item.id}>{item.name} - ${item.price}</li>
        ))}
      </ul>
      <p>Total: ${state.total}</p>
      <p>Discount: {state.discount * 100}%</p>
      <button onClick={() => addItem({ id: 1, name: 'Product 1', price: 10 })}>Add Item</button>
      <button onClick={() => removeItem({ id: 1, name: 'Product 1', price: 10 })}>Remove Item</button>
      <button onClick={() => applyDiscount(0.1)}>Apply 10% Discount</button>
    </div>
  );
};

export default ShoppingCart;

在这个例子中，cartReducer 函数处理所有状态更新逻辑，dispatch 用于触发不同的 action，从而更新购物车的各种状态。这种方式使得状态管理更加清晰和可维护。

星途面试题库

面试题：React中useReducer Hook在复杂状态管理中的工作原理

知识考点

面试题答案

useReducer在复杂状态管理场景下的作用

与useState相比处理复杂状态的优势

示例：使用useReducer管理复杂组件状态