React与Redux中如何通过Dispatch避免组件重渲染？

1. 优化Redux状态存储结构 #

不要把所有卡片的展开状态存在数组里，改用键值对对象存储仅展开的卡片索引，这样每次切换只会修改单个键值，不会触发整个状态树的大范围更新：

// reducer示例
const initialState = {
  expandedCards: {} // 结构：{ [index]: boolean }
};

function productReducer(state = initialState, action) {
  switch (action.type) {
    case 'TOGGLE_PRODUCT_CARD':
      const index = action.payload;
      return {
        ...state,
        expandedCards: {
          ...state.expandedCards,
          [index]: !state.expandedCards[index]
        }
      };
    default:
      return state;
  }
}

2. 让ProductCard仅订阅自身相关的状态 #

在ProductCard内部用useSelector精准获取当前卡片的展开状态，而非订阅整个Redux state。这样只有当前卡片的状态变化时，组件才会重渲染：

// ProductCard组件内部
import { useSelector, useDispatch } from 'react-redux';

const ProductCard = ({ productIndex, product }) => {
  // 只取当前卡片对应的展开状态
  const isExpanded = useSelector(state => state.products.expandedCards[productIndex] || false);
  const dispatch = useDispatch();

  const handleToggle = () => {
    dispatch(toggleProductCard(productIndex));
  };

  // ...组件渲染逻辑
};

这样就无需再把handleProductCard作为props传递，减少了props依赖。

3. 用React.memo缓存ProductCard组件 #

把ProductCard包裹在React.memo里，确保只有product或productIndex变化时才重渲染：

import React from 'react';

const ProductCard = React.memo(({ productIndex, product }) => {
  // ...组件内部逻辑
});

export default ProductCard;

如果product是从Redux获取的，要确保获取products的选择器是memoized的，避免每次state更新都生成新的products数组：

// 使用reselect创建memoized选择器
import { createSelector } from '@reduxjs/toolkit';

const selectProductsState = state => state.products;
export const selectProducts = createSelector(
  [selectProductsState],
  productsState => productsState.list
);

然后在父组件里用这个选择器获取products：

const products = useSelector(selectProducts);

4. 优先使用唯一业务标识作为key #

你的代码里已经用了product?.productCode || productIndex作为key，这很好，尽量优先用唯一业务标识（比如productCode），避免数组顺序变化导致的不必要重渲染。

内容的提问来源于stack exchange，提问作者Joseph