Javascript 在react中渲染二维阵列的最佳方法？

我试图生成一个图形视图，但遇到了性能问题。我想更新视图，例如拖动起始节点，并将其反映在基础模型中。对模型的更新似乎会强制更新图中每个节点的状态。我是否只是切换到带有键的映射，并存储列和行以包装演示文稿的内容

<Graph>
  {graph.map((row: any, i: number) => {
    return (
      <GraphRow key={i}>
        {row.map((node: any) => {
          return (
            <GraphNode
              className={Object.keys(node)
                .filter(key => node[key])
                .join(" ")}
              key={`${node.x} ${node.y}`}
              onClick={() => updateNode(toggleIsWall(node))}
              onDragStart={() => {
                setDraggedNode(node);
              }}
              onDragEnter={() => {
                handleDragEnter(node);
              }}
              onDragLeave={() => {
                handleDragLeave(node);
              }}
              onDragEnd={() => {
                handleDragEnd(node);
              }}
              draggable
            >
              <div>
                {node.x}, {node.y}
              </div>
            </GraphNode>
          );
        })}
      </GraphRow>
    );
  })}
</Graph>

{graph.map（（行：any，i:number）=>{
返回(
{row.map（（节点：any）=>{
返回(
节点[键]）
.join（“”）
key={`${node.x}${node.y}}
onClick={（）=>updateNode（toggleIsWall（节点））}
onDragStart={（）=>{
SetDragedNode（节点）；
}}
onDragEnter={（）=>{
handleDragEnter（节点）；
}}
onDragLeave={（）=>{
handleDragLeave（节点）；
}}
onDragEnd={（）=>{
手柄（节点）；
}}
拖动
>
{node.x}，{node.y}
);
})}
);
})}

谢谢你的帮助。我实现了自己的

shouldComponentUpdate

，这很有帮助，但还不够。我的方法的基本问题是试图用div表示节点。如此数量的div表现糟糕。我改为使用

来表示每个节点。据我所知，如果没有达到我需要的性能，下一步就是使用画布。希望这对别人有帮助。干杯

谢谢你的帮助。我实现了自己的

shouldComponentUpdate

，这很有帮助，但还不够。我的方法的基本问题是试图用div表示节点。如此数量的div表现糟糕。我改为使用

来表示每个节点。据我所知，如果没有达到我需要的性能，下一步就是使用画布。希望这对别人有帮助。干杯

看起来您可能会从使用中受益看起来您可能会从使用中受益