我有一个很大的数据树结构,我目前正在这个结构中作为平面列表存储：

new Map({
  1: new Node({
    id: 1,text: 'Root',children: [2,3]
  }),2: new Node({
    id: 2,text: 'Child 1',children: [4]
  }),3: new Node({
    id: 3,text: 'Child 2',children: []
  }),4: new Node({
    id: 4,text: 'Child of child 1',children: []
  })
});

虽然将其构建为平面列表使得更新节点变得容易,但我发现随着树的增长,交互变得迟钝.交互包括能够选择一个或多个节点,切换其子节点的可见性,更新文本等.它看起来像一个关键的原因是缓慢的UI是整个树正在重新绘制每个交互.

我想使用shouldComponentUpdate,以便如果我更新节点3,节点2和4不更新.如果数据存储为树,这将很容易(我可以简单地检查this.props！== nextProps),但是由于数据存储在平面列表中,检查将会变得更加复杂.

应该如何存储数据并使用shouldComponentUpdate(或其他方法)来支持数百或数千个树节点的平滑UI？

编辑

我已经连接了顶级的商店,然后不得不将整个商店传递给子部件.

我的结构是：

<NodeTree> 
  <NodeBranch>
    <Node>{{text}}</Node>
    <NodeTree>...</NodeTree>
  </NodeBranch>
  <NodeBranch>
    <Node>{{text}}</Node>
    <NodeTree>...</NodeTree>
  </NodeBranch>
  ...
</NodeTree>

< Node>可以使用shouldComponentUpdate进行简单的检查,看看标题是否已经改变,但是我没有类似的解决方案可以在< NodeTree>或< NodeBranch>给定树的递归性质.

它看起来像是最好的解决方案(感谢@Dan Abramov)将连接每个&NodeBranch,而只是连接在顶层.今天晚上我会测试一下.