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

我just added一个新的例子就说明了这一点。
您可以像这样运行它:

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

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

open http://localhost:3000/