树结构和React / Redux中的shouldComponentUpdate的性能问题

Question

我对React，Redux和ImmutableJS还是相当陌生，并且遇到了一些性能问题。

我有一个大的数据树结构，目前正在以平面列表形式存储该数据：

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>，而不是仅在顶层进行连接。我今天晚上要测试。

Answer 1

我刚刚添加了一个新的示例来说明这一点。
您可以这样运行它：

git clone https://github.com/rackt/redux.git

cd redux/examples/tree-view
npm install
npm start

open http://localhost:3000/