面试题：React中React Context与Redux在状态管理上的主要差异

数据流向

React Context：数据流向相对灵活，没有强制的固定模式。可以通过Provider组件向子孙组件传递数据，子孙组件通过Consumer组件或useContext Hook获取数据，数据传递路径取决于组件树结构，能实现跨层级数据共享，不需要通过中间组件层层传递。
Redux：遵循单向数据流原则。数据集中存储在store中，组件通过dispatch action来描述状态变化，reducer根据action来更新store中的状态，视图再根据store的变化重新渲染，整个过程数据流向清晰且严格。

适用场景

React Context：
- 适用于一些简单的、局部性的跨层级数据共享场景，例如主题切换、语言切换等功能。这些场景下数据量较小且逻辑相对简单，不需要复杂的状态管理逻辑。
- 当组件间有频繁的数据共享需求，但不需要进行复杂的状态更新逻辑和追溯时，使用Context可以避免繁琐的props传递。
Redux：
- 适用于大型应用程序，当应用的状态逻辑复杂，需要对状态进行集中管理和维护，例如处理多个页面之间共享的用户登录状态、购物车数据等。
- 当需要对状态变化进行追踪、调试，以及实现撤销/重做等功能时，Redux的单向数据流和纯函数reducer特性使其更易于实现这些功能。

举例

适合使用React Context的情况：在一个多层级的导航菜单组件中，需要共享当前选中的菜单项，以便子菜单可以根据父菜单的选中状态进行样式调整。这种情况下，使用React Context可以方便地将选中状态传递给各级子菜单，而不需要在每个中间组件传递props。例如：

import React, { createContext, useState } from'react';

const MenuContext = createContext();

const Menu = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <MenuContext.Provider value={{ selectedItem, setSelectedItem }}>
      {/* 菜单组件结构 */}
    </MenuContext.Provider>
  );
};

const SubMenuItem = () => {
  const { selectedItem } = React.useContext(MenuContext);

  return (
    <div className={selectedItem === '子菜单项'? 'active' : ''}>
      子菜单项
    </div>
  );
};

适合使用Redux的情况：在一个电商应用中，购物车功能涉及到商品的添加、删除、数量修改等复杂操作，并且购物车状态需要在多个页面（如商品列表页、详情页、结算页）中共享和同步。此时使用Redux可以更好地管理购物车状态，实现统一的状态更新逻辑和调试追踪。例如：

// actions.js
const ADD_TO_CART = 'ADD_TO_CART';

export const addToCart = (product) => ({
  type: ADD_TO_CART,
  payload: product
});

// reducer.js
const initialState = {
  cart: []
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
      ...state,
        cart: [...state.cart, action.payload]
      };
    default:
      return state;
  }
};

// store.js
import { createStore } from'redux';
import { cartReducer } from './reducer';

const store = createStore(cartReducer);

// 在组件中使用
import React from'react';
import { useSelector, useDispatch } from'react-redux';
import { addToCart } from './actions';

const Product = ({ product }) => {
  const dispatch = useDispatch();
  const cart = useSelector(state => state.cart);

  return (
    <div>
      <button onClick={() => dispatch(addToCart(product))}>加入购物车</button>
    </div>
  );
};

星途面试题库

面试题：React中React Context与Redux在状态管理上的主要差异

知识考点

面试题答案

数据流向

适用场景

举例