如何不创建新数组更新Redux状态 解决FlatList全量重渲染问题

核心前提 #

Redux 状态更新必须遵循不可变原则，直接修改原state数组（比如直接调用原数组的push方法修改state.data）属于错误写法，会导致状态更新无法被追踪、组件订阅失效、调试功能异常，绝对不要为了减少重渲染打破这个规则。

你遇到全量重渲染的核心问题不是concat返回新数组，而是列表渲染优化逻辑没有匹配分页场景，以下是可落地的实现方案：

方案1：调整状态存储结构（最稳定，推荐） #

把原来的一维数组存储结构，改成「字典存实体+有序数组存ID」的结构，从根源上保证追加新数据时，原有列表项的引用完全不发生变化。

第一步：修改初始状态 #

// 原初始值data: [1,2,3]可转换为如下结构
export const initialState = {
  // 存储所有列表项，key为项的唯一ID，value为项本身，旧项引用永远不会被修改
  dataMap: {1:1, 2:2, 3:3},
  // 存储列表展示顺序对应的ID数组
  dataIds: [1,2,3]
}

第二步：修改reducer更新逻辑 #

接口返回新一页数据时，只新增字典里的新项、追加新ID到ID列表，不触碰原有旧数据：

// 接口请求成功的处理逻辑
const newList = action.data.data
const newEntries = {}
const newIds = []

newList.forEach(item => {
  // 每个列表项必须有全局唯一的id字段，没有的话自行生成稳定唯一标识，基础类型值可直接用自身作为id
  const itemId = typeof item === 'object' ? item.id : item
  newEntries[itemId] = item
  newIds.push(itemId)
})

return {
  ...state,
  dataMap: {
    ...state.dataMap,
    ...newEntries
  },
  dataIds: [...state.dataIds, ...newIds]
}

第三步：适配FlatList渲染逻辑 #

• data属性直接传dataIds数组
• keyExtractor返回项对应的唯一ID，禁止用数组索引作为key
• renderItem里根据ID从dataMap里取对应项内容渲染
• 列表项组件用React.memo包裹，做props浅比较，只有props变化时才重渲染

方案2：保留一维数组结构（改动最小） #

如果你不想改现有状态结构，只要做好两点优化，也能避免全量重渲染：

1. 保证列表项引用稳定：用concat追加数据本身不会修改旧数组项的引用，不要在更新过程中对旧项做解构重建（比如state.data.map(item => ({...item, xx: xx}))这种会把旧项变成新引用的操作）
2. 做渲染层拦截：
   • 给FlatList配置正确的keyExtractor，使用项的唯一ID作为key
   • 列表项组件必须用React.memo包裹
   • 不要给renderItem、ItemSeparatorComponent等属性传内联函数，提前用useCallback包裹，避免每次渲染生成新函数引用导致列表误判更新

如果你用Redux Toolkit #

RTK内置Immer做不可变更新兜底，你可以直接写类似可变的数组操作语法，Immer会自动保证旧项引用不被修改，不会破坏不可变原则：

const listSlice = createSlice({
  name: 'list',
  initialState,
  reducers: {
    appendNextPage: (state, action) => {
      // 直接push即可，Immer会自动生成正确的不可变状态
      state.data.push(...action.payload.data)
    }
  }
})

注意：不要尝试通过直接修改原state数组的方式绕过更新，这种写法短期看似能减少重渲染，长期会埋下极难排查的状态不一致bug。

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