React绘图程序中如何解耦状态变量，避免已绘单元格颜色随状态变更？

问题根源 #

你当前的实现里，所有<Cell>组件直接把父组件传递的color作为自身背景色。因为React状态更新会触发组件重渲染，所以父组件切换选中色时，所有Cell都会跟着使用新的color作为背景，导致已绘制的单元格颜色被覆盖。

核心解决方案 #

让每个<Cell>独立维护自己的背景色状态，父组件传递的color仅作为「点击单元格时要应用的画笔颜色」，而非单元格的当前背景色。这样切换选中色只会影响后续点击的单元格，已绘制的单元格颜色保持不变。

具体实现 #

1. 父组件<Canvas>逻辑调整 #

父组件只需要维护当前选中的颜色，继续把它传给颜色选择器和所有单元格：

import { useState } from 'react';
import ColorSelector from './ColorSelector';
import Cell from './Cell';

function Canvas() {
  const [selectedColor, setSelectedColor] = useState('#000000'); // 默认选中黑色
  const gridSize = 10; // 10x10网格

  return (
    <div>
      <ColorSelector onColorPick={setSelectedColor} />
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${gridSize}, 30px)` }}>
        {Array.from({ length: gridSize * gridSize }).map((_, idx) => (
          <Cell key={idx} brushColor={selectedColor} />
        ))}
      </div>
    </div>
  );
}

export default Canvas;

2. 子组件<Cell>独立维护背景色 #

在Cell内部用useState保存自己的背景色，点击时将其更新为父组件传来的画笔颜色：

import { useState } from 'react';

function Cell({ brushColor }) {
  // 初始背景设为白色，代表未绘制状态
  const [cellColor, setCellColor] = useState('#ffffff');

  const handleClick = () => {
    setCellColor(brushColor);
  };

  return (
    <div
      style={{
        width: '30px',
        height: '30px',
        border: '1px solid #eee',
        backgroundColor: cellColor,
        cursor: 'pointer'
      }}
      onClick={handleClick}
    />
  );
}

export default Cell;

3. 可选：全局画布数据跟踪（如需导出/清空功能） #

如果需要实现导出画布、一键清空等功能，父组件可以维护一个二维数组记录所有单元格的颜色，此时Cell的背景色从数组中读取，点击时更新数组对应位置：

// Canvas组件修改
function Canvas() {
  const [selectedColor, setSelectedColor] = useState('#000000');
  const gridSize = 10;
  // 初始化全白的颜色数组
  const [gridColors, setGridColors] = useState(
    Array.from({ length: gridSize }, () => Array(gridSize).fill('#ffffff'))
  );

  const updateCellColor = (row, col) => {
    const newGrid = [...gridColors];
    newGrid[row][col] = selectedColor;
    setGridColors(newGrid);
  };

  return (
    <div>
      <ColorSelector onColorPick={setSelectedColor} />
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${gridSize}, 30px)` }}>
        {Array.from({ length: gridSize }).map((_, row) =>
          Array.from({ length: gridSize }).map((_, col) => (
            <Cell
              key={`${row}-${col}`}
              cellColor={gridColors[row][col]}
              onClick={() => updateCellColor(row, col)}
            />
          ))
        )}
      </div>
    </div>
  );
}

// Cell组件简化
function Cell({ cellColor, onClick }) {
  return (
    <div
      style={{
        width: '30px',
        height: '30px',
        border: '1px solid #eee',
        backgroundColor: cellColor,
        cursor: 'pointer'
      }}
      onClick={onClick}
    />
  );
}

原理说明 #

修改后，每个Cell的背景色是自身独立的状态（或父组件中对应位置的独立数据），父组件的selectedColor仅作为画笔工具的当前颜色，只会在Cell被点击时触发对应单元格的颜色更新，不会影响其他已绘制的单元格。

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