时间戳

首页 > 解决方案 > 在反应中渲染二维数组的最佳方法？

javascript - 在反应中渲染二维数组的最佳方法？

问题描述

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

<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>

标签： javascriptreactjsreact-redux

解决方案

谢谢您的帮助。我实现了自己的shouldComponentUpdate，这有帮助，但还不够。我的方法的根本问题是试图用 div 表示节点。该数量的 div 表现非常糟糕。相反，我用来<svg>表示每个节点。据我了解，如果那没有得到我需要的性能，那么下一步将是使用画布。希望这可以帮助某人。干杯!

推荐阅读