我对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,而只是连接在顶层.今天晚上我会测试一下.
我
just added一个新的例子显示了这一点.
你可以这样运行它：
你可以这样运行它：
git clone https://github.com/rackt/redux.git cd redux/examples/tree-view npm install npm start open http://localhost:3000/
