如何结合Redux实现FlatList无限滚动并避免全列表重渲染

• 1 修正useSelector的错误用法
  你当前的useSelector每次执行都会返回一个全新的对象，哪怕actsPreview本身没有变化，返回值的引用也会改变，导致组件不必要的全量重渲染。正确写法是只提取需要的actsPreview字段，利用useSelector自带的浅比较能力避免无效更新。

// 错误写法
const { actsPreview } = useSelector(state => ({
  ...state.act,
  attributes: { ...state.attributes },
}))
// 正确写法
const actsPreview = useSelector(state => state.act.actsPreview)

• 2 修复页码请求的异步闭包问题
  setPage是异步更新的，调用setPage后立即读取page拿到的还是更新前的旧值，会导致请求页码错误。同时fetchActsPreview不要依赖外部的page变量，改成接收页码参数的形式避免闭包陷阱。

// 修正fetch函数定义，接收页码参数
const fetchActsPreview = (pageNum) => dispatch(getActsPreview(pageNum))
const handleLoadMore = () => {
  const nextPage = page + 1
  setPage(nextPage)
  fetchActsPreview(nextPage)
}

• 3 修正Redux Reducer的列表更新逻辑
  如果加载更多数据时你直接替换了actsPreview数组而不是追加新数据，也会导致FlatList判断为整个列表变化触发全量重渲。需要将新返回的分页数据追加到原有数组末尾：

// reducer 中处理加载更多的逻辑示例
case GET_ACTS_PREVIEW_SUCCESS:
  return {
    ...state,
    actsPreview: [...state.actsPreview, ...action.payload] // 追加而非替换
  }

• 4 优化renderItem组件避免无效重渲
  将renderItem对应的列表项组件用React.memo包裹，开启浅比较，只有当条目自身的属性变化时才会重新渲染，不会跟随父组件的更新全量重渲所有条目：

// 示例：封装列表项组件并用memo包裹
const ActItem = React.memo(({ item }) => {
  return <View>/* 你的条目渲染逻辑 */</View>
})
const renderItem = ({ item }) => <ActItem item={item} />

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