在 React Js 中重新渲染画布

Question

我有一个包含 500 行 X 500 列的网格数据的画布。我正在尝试更新 React 状态中的几个特定单元格，一旦更新反应状态，整个画布就会重新创建和渲染。有没有更好的方法来更新画布的一部分？下面是组件的流程

1. 在componentDidMount() 中调用API 并将响应保存在状态中。
2. 使用状态创建画布并在 UI 中呈现
3. 每30秒调用api并获取数据，只更新数据和更新状态。
4. 目前，一旦状态更新，就会创建并渲染整个罐子
5. 现在我可以只更新画布中最新更新的状态值吗？

Answer 1

我认为画布中的项目数量不是问题。我猜问题是您需要以正确的方式更新项目。这是一个使用 Hooks 的示例，说明如何仅更新正在更改的画布部分而不更改所有内容。显然，它需要适应您的具体实例，但它应该为您提供如何做到这一点的方向。

function Canvas(props) {
  var item = 0;
  // pos is the item in the table that's going to be updated
  const [pos, setPos] = React.useState(0);
  //sample data
  const [A,setA] = React.useState([
    {data:"N", id:1},{data:"N",id :2},{data:"N",id :3},{data:"N",id :4}
   ]); 
  const totalitems = A.length;
  
  const canvasRef = React.useRef(null)
  
  function HandleClick() {
    let newArray = [...A];
    item=Math.floor(Math.random()*totalitems);
    // toggle between letters
    newArray[item].data == "N" ? newArray[item].data = "H" : newArray[item].data = "N" ; 
    setA(newArray); // set the entry in the array to the new letter
    setPos(item);
  };
    
  const tabledraw = ctx => {
    // The following line clears the whole canvas
    // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

    ctx.fillStyle = '#000000';
    // Clear only part of the canvas that corresponds to the size
    // of the text that is being replaced
    ctx.clearRect(pos*50, 0,50, 100);
    ctx.font = "30px Arial";
    // translate the position of the start of the canvas to where the 
    // character that is changing is
    ctx.translate(pos*50,0);
    ctx.fillText(A[pos].data, 0, 80);
    // Translate the canvas back to its original position
    ctx.translate(-pos*50,0);
    }
  
React.useEffect(() => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d')
    tabledraw(context)
    }, [tabledraw])
  
  return(
   <>
   <canvas ref={canvasRef} {...props}/>
   <button onClick={HandleClick}>Change</button>
   </>
  )
}