React/Redux列表每秒更新时如何避免全量重渲染？

DevOps 小满

2026-5-28

这是个很典型的性能优化场景，咱们一步步拆解问题，找到最优解：

问题根源分析

首先，你遇到的全量重渲染本质上有两个核心原因：

你的Reducer每次都会创建全新的数组引用，导致MyList组件每次都会触发重渲染；
当前Reducer把新元素放在数组开头，并且移除最后一个元素，这会让React的虚拟DOM认为所有元素的位置都发生了变化，即使元素本身没有修改，也会触发组件的移动/重检查（虽然PureComponent能跳过重渲染，但移动大量组件依然有性能开销）。

解决方案

1. 优化Reducer逻辑，稳定旧元素引用+合理安排新元素位置

首先调整Reducer，确保旧元素的引用完全不变，同时把新元素追加到数组末尾（而非开头），这样React只需要在列表末尾新增组件，无需移动其他元素：

return { 
  ...state, 
  myList: [
    // 先过滤掉重复ID的元素（如果需要去重）
    ...state.myList.filter(item => payload.id !== item.id), 
    // 新元素追加到末尾
    payload
  ].slice(-6) // 按需保留固定数量的元素，比如最多6个
};

这样修改后，旧元素的引用完全复用，只有新元素是全新的，PureComponent能精准跳过旧组件的重渲染。

2. 给`MyList`组件添加自定义更新判断

虽然MyRow用了PureComponent，但MyList本身还是会因为数组引用变化而重渲染。我们可以自定义shouldComponentUpdate，只在真正需要更新时才允许重渲染：

class MyList extends Component {
  shouldComponentUpdate(nextProps) {
    const currentList = this.props.myList;
    const nextList = nextProps.myList;
    
    // 列表长度变化，说明有新增/移除，必须更新
    if (currentList.length !== nextList.length) {
      return true;
    }
    
    // 检查最后一个元素是否变化（因为新元素追加在末尾）
    const lastCurrent = currentList[currentList.length - 1];
    const lastNext = nextList[nextList.length - 1];
    return lastCurrent.id !== lastNext.id;
  }

  render() {
    return (
      <div>
        {this.props.myList.map((list) => (
          <MyRow key={list.id} data={list}/>
        ))}
      </div>
    );
  }
}

3. 用记忆化选择器减少不必要的Props更新

借助reselect库创建记忆化的Selector，只有当myList的实际内容发生变化时，才返回新的数组引用，避免MyList无意义的重渲染：

import { createSelector } from 'reselect';

// 基础Selector
const selectMyListState = state => state.myList;

// 记忆化Selector，只有输入变化时才重新计算
const selectMyList = createSelector(
  [selectMyListState],
  (myList) => myList
);

function select(state) {
  return {
    myList: selectMyList(state)
  };
}

export default connect(select)(MyList);

4. 确认`MyRow`的`PureComponent`配置正确

确保MyRow确实继承自PureComponent，并且props.data始终是稳定的引用（不要在父组件里克隆或修改data对象），这样React会自动跳过未变化的MyRow重渲染。

效果验证

做完这些修改后，你会发现：

只有新增的MyRow会触发渲染；
已存在的MyRow完全不会重渲染，即使MyList偶尔触发重渲染，PureComponent也会跳过它们；
即使更新频率提升到每秒4次，应用也能保持流畅。

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

React/Redux列表每秒更新时如何避免全量重渲染？

问题根源分析 #

解决方案 #