React中文本输入网格状态更新的性能优化方案咨询

我正在开发一个包含文本输入网格的应用。在Redux store中，我有一个由行组成的content状态，每行包含20个单元格。每个单元格对应一个文本输入框，触发onChange时会更新store中的content状态。行数最多可达到100行，当行数较多时，状态更新速度非常缓慢。我认为代码存在优化空间，但找不到问题所在。以下是当前的实现代码（已剔除过多细节）：

类型定义 #

type Content = Row[]
type Row = { cells: string[] }

Grid组件 #

const Grid = () => {
  const content = // 从store获取content

  return (
    <div>
      {content.map((_, rowIndex) => (
        <Row rowIndex={rowIndex} key={`row_${rowIndex}`} />
      ))}
    </div>
  )
}

Row组件 #

const Row = ({ rowIndex }) => {
  const row = // 从store获取content[rowIndex]

  return (
    <div>
        {row.cells.map((_, colIndex) => (
          <div key={`(${rowIndex},${colIndex})`}>
            <Cell rowIndex={rowIndex} colIndex={colIndex} />
          </div>
        ))}
    </div>
  )
}

Cell组件 #

const Cell = ({ rowIndex, colIndex }) => {
  const content = // 从store获取content
  const row = content[rowIndex]
  const cell = row.cells[colIndex]

  return (
      <TextInput
        value={cell}
        // TODO: 行数多时更新很慢
        onChange={e => dispatch(updateCell({ rowIndex, colIndex, text: e.target.value }))}
      />
  )
}

Reducer中的UpdateCell函数 #

updateCell: (state, action: PayloadAction<{ rowIndex: number; colIndex: number; text: string }>) => {
      const { rowIndex, colIndex, text } = action.payload
      state.content[rowIndex].cells[colIndex] = text
}

1. 修复Reducer的状态更新逻辑 #

如果使用的是传统Redux，直接修改原state对象违反了不可变更新原则，会导致Redux无法正确追踪状态变化，甚至触发不必要的全局重渲染。即使是Redux Toolkit的Immer写法，也需要确保状态结构的更新逻辑清晰：

// 传统Redux不可变更新写法
updateCell: (state, action: PayloadAction<{ rowIndex: number; colIndex: number; text: string }>) => {
  const { rowIndex, colIndex, text } = action.payload;
  return {
    ...state,
    content: state.content.map((row, rIdx) => {
      if (rIdx !== rowIndex) return row;
      return {
        ...row,
        cells: row.cells.map((cell, cIdx) => cIdx === colIndex ? text : cell)
      };
    })
  };
}

// Redux Toolkit + Immer 安全写法（原写法本身没问题，但需确保Immer正常工作）
updateCell: (state, action: PayloadAction<{ rowIndex: number; colIndex: number; text: string }>) => {
  const { rowIndex, colIndex, text } = action.payload;
  state.content[rowIndex].cells[colIndex] = text;
}

2. 避免组件不必要的重渲染 #

当前所有Row和Cell组件会在content任何一处变化时全量重渲染，这是性能瓶颈的核心原因，优化方式如下：

（1）用React.memo缓存组件

给Row和Cell包裹React.memo，只有当props变化时才重渲染：

const Row = React.memo(({ rowIndex }) => {
  // 原有代码
});

const Cell = React.memo(({ rowIndex, colIndex }) => {
  // 原有代码
});

（2）精准传递props与获取状态

• 修改Grid和Row组件，直接传递单元格值给Cell，避免组件依赖整个content数组：

// Grid组件修改
const Grid = () => {
  const content = // 从store获取content
  return (
    <div>
      {content.map((row, rowIndex) => (
        <Row key={`row_${rowIndex}`} row={row} rowIndex={rowIndex} />
      ))}
    </div>
  )
}

// Row组件修改
const Row = React.memo(({ row, rowIndex }) => {
  return (
    <div>
        {row.cells.map((cellValue, colIndex) => (
          <div key={`(${rowIndex},${colIndex})`}>
            <Cell 
              rowIndex={rowIndex} 
              colIndex={colIndex} 
              value={cellValue} 
            />
          </div>
        ))}
    </div>
  )
})

// Cell组件修改
const Cell = React.memo(({ rowIndex, colIndex, value }) => {
  return (
      <TextInput
        value={value}
        onChange={e => dispatch(updateCell({ rowIndex, colIndex, text: e.target.value }))}
      />
  )
})

（3）使用精准的useSelector选择器

如果用useSelector获取状态，让Cell只选择自身需要的单元格值，而非整个content：

const Cell = React.memo(({ rowIndex, colIndex }) => {
  // 仅获取当前单元格的值，而非整个content数组
  const cellValue = useSelector(state => state.content[rowIndex].cells[colIndex]);
  
  return (
      <TextInput
        value={cellValue}
        onChange={e => dispatch(updateCell({ rowIndex, colIndex, text: e.target.value }))}
      />
  )
})

3. 输入防抖（可选） #

如果用户输入频率很高，可给onChange添加防抖，减少Redux状态更新次数（注意：会延迟状态更新，需根据业务场景选择）：

import { useCallback } from 'react';
import debounce from 'lodash.debounce';

const Cell = React.memo(({ rowIndex, colIndex }) => {
  const cellValue = useSelector(state => state.content[rowIndex].cells[colIndex]);
  
  const debouncedUpdate = useCallback(
    debounce((text) => {
      dispatch(updateCell({ rowIndex, colIndex, text }));
    }, 300), // 300毫秒防抖间隔
    [rowIndex, colIndex]
  );
  
  const handleChange = (e) => {
    debouncedUpdate(e.target.value);
  };
  
  return (
      <TextInput
        value={cellValue}
        onChange={handleChange}
      />
  )
})

内容的提问来源于stack exchange，提问作者김민겸