如何在React中高效绘制50×50网格？避免重复调用drawGrid()

你可以通过生成包含 50×50个单元格 的扁平化数组，一次性渲染到Grid组件中，避免重复调用drawGrid()50次。以下是两种简洁的实现方式：

方式一：直接生成完整网格数组 #

直接创建长度为2500（50行×50列）的数组，每个元素对应一个GridItem，同时给每个单元格添加唯一key（React列表渲染的必要要求）：

const cell = <GridItem colSpan={1} rowSpan={1} bg="papayawhip" />;

export const Board = () => {
  return (
    <div className="scaffold">
      <Grid
        h="500px"
        templateRows="repeat(50, 1fr)"
        templateColumns="repeat(50, 1fr)"
        gap={1}
      >
        {Array.from({ length: 50 * 50 }, (_, index) => 
          React.cloneElement(cell, { key: index })
        )}
      </Grid>
    </div>
  );
};

方式二：复用现有drawGrid并扁平化 #

如果想保留drawGrid函数，可以生成50个行数组，再通过flat()方法扁平化处理：

const cell = <GridItem colSpan={1} rowSpan={1} bg="papayawhip" />;

export const Board = () => {
  const drawFullGrid = () => {
    return Array.from({ length: 50 }, (_, rowIdx) => 
      drawGrid().map((cell, colIdx) => 
        React.cloneElement(cell, { key: `${rowIdx}-${colIdx}` })
      )
    ).flat();
  };

  return (
    <div className="scaffold">
      <Grid
        h="500px"
        templateRows="repeat(50, 1fr)"
        templateColumns="repeat(50, 1fr)"
        gap={1}
      >
        {drawFullGrid()}
      </Grid>
    </div>
  );
};

const drawGrid = () => {
  return Array.from({ length: 50 }, (_, i) => cell);
};

关键说明 #

1. 唯一key的作用：React列表渲染时，唯一key能帮助框架识别元素变化，优化渲染性能，避免控制台警告。上面的代码通过索引或行列组合生成唯一标识。
2. Grid自动布局：由于你设置了templateColumns="repeat(50, 1fr)"，Grid会自动将2500个单元格按每行50个排列，刚好形成50行的布局。

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