我对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>，而不是仅在顶层进行连接。我今天晚上要测试。
我刚刚添加了一个新的示例来说明这一点。
您可以这样运行它：
git clone https://github.com/rackt/redux.git
cd redux/examples/tree-view
npm install
npm start
open http://localhost:3000/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句