使用React搭配Redux Toolkit绑定多行数据时页面卡顿甚至崩溃问题求助

卡顿核心原因 #

• 全量无差别重渲染：任意单个条目的勾选、输入操作触发Redux状态更新后，所有列表项组件都会同步重渲染，数据量越大开销越高
• 未优化Redux选择器：普通useSelector未做缓存，每次状态更新都返回新的数组引用，哪怕实际值无变化也会触发组件重绘
• 无列表虚拟化处理：大量列表条目一次性全部渲染到DOM中，交互时的重排重绘成本极高，严重时直接触发页面崩溃
• 输入状态更新频率过高：输入框每输入一个字符就同步更新Redux全局状态，进一步放大了全量重绘的卡顿问题

修复方案 #

1. 阻断不必要的组件重渲染 #

给列表项组件包裹React.memo，仅当条目自身属性变化时才触发重渲染，同时用useCallback包裹传递给子组件的处理函数，避免函数引用频繁变化导致memo失效：

// 列表项组件定义
interface CountryItemProps {
  id: string
  name: string
  checked: boolean
  onCheck: (id: string, checked: boolean) => void
  onNameUpdate: (id: string, name: string) => void
}

const CountryItem = React.memo(({ id, name, checked, onCheck, onNameUpdate }: CountryItemProps) => {
  return (
    <div className="country-item">
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={(e) => onCheck(id, e.target.checked)} 
      />
      <input 
        value={name} 
        onChange={(e) => onNameUpdate(id, e.target.value)} 
      />
    </div>
  )
})

2. 优化Redux状态更新与选择器 #

用RTK内置的createSelector做状态缓存，只在依赖的状态片段变化时返回新值；同时reducer中修改单个条目时借助immer仅修改对应下标属性，不要全量替换数组：

import { createSelector } from '@reduxjs/toolkit'

// 取列表根状态
const selectCountryList = (state: RootState) => state.country.list

// 缓存列表查询结果
export const selectMemoizedCountryList = createSelector(
  [selectCountryList],
  (list) => list
)

// 更推荐按需查询单个条目，避免组件依赖全量列表
export const selectCountryById = createSelector(
  [selectCountryList, (state, id: string) => id],
  (list, id) => list.find(item => item.id === id)
)

3. 新增列表虚拟化处理 #

使用react-window实现虚拟滚动，仅渲染视口范围内的列表条目，大幅减少DOM节点数量：

import { FixedSizeList as List } from 'react-window'

const CountryList = () => {
  const countryList = useSelector(selectMemoizedCountryList)
  const onCheck = useCallback((id: string, checked: boolean) => {
    // 调用dispatch更新对应条目状态
  }, [dispatch])
  const onNameUpdate = useCallback((id: string, name: string) => {
    // 调用dispatch更新对应条目状态
  }, [dispatch])

  const Row = ({ index, style }) => {
    const item = countryList[index]
    return (
      <div style={style}>
        <CountryItem 
          {...item} 
          onCheck={onCheck} 
          onNameUpdate={onNameUpdate} 
        />
      </div>
    )
  }

  return (
    <List 
      height={600} 
      itemCount={countryList.length} 
      itemSize={48} 
      width="100%"
    >
      {Row}
    </List>
  )
}

4. 降低输入状态更新频率 #

如果不需要实时同步输入内容到全局状态，可以把输入的临时状态存在组件内部useState，失焦时再同步到Redux，减少状态更新次数：

const CountryItem = React.memo(({ id, name: initialName, checked, onCheck, onNameUpdate }: CountryItemProps) => {
  const [name, setName] = useState(initialName)
  // 同步外部传入的name更新
  useEffect(() => setName(initialName), [initialName])

  return (
    <div className="country-item">
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={(e) => onCheck(id, e.target.checked)} 
      />
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        onBlur={() => onNameUpdate(id, name)}
      />
    </div>
  )
})

内容的提问来源于stack exchange，提问作者Amit Singh Rawat