树结构和React/Redux中的shouldComponentUpdate的性能问题 [英] Performance issues with a tree structure and shouldComponentUpdate in React / Redux

问题描述

我对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>，我没有类似的解决方案. /p>

看起来最好的解决方案(感谢@Dan Abramov)将是连接每个<NodeBranch>，而不是仅在顶层进行连接.我今天晚上要测试.

解决方案

我刚刚添加了一个新示例，该示例显示了就是这样.
您可以这样运行它:

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

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

open http://localhost:3000/

I'm fairly new to React, Redux and ImmutableJS, and have run into some performance issues.

I have a large tree structure of data, which I'm currently storing as a flat list in this structure:

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: []
  })
});

While structuring it as a flat list makes updating nodes easy, I'm finding that interaction gets sluggish as the tree grows. Interaction includes being able to select one or more nodes, toggle the visibility of their child nodes, update the text, and so on. It looks like a key reason for the the sluggish UI is that the entire tree is being redrawn for each interaction.

I want to use shouldComponentUpdate such that if I update node 3, nodes 2 and 4 do not update. This would be easy if the data was stored as a tree (I could simply check whether this.props !== nextProps), but as the data is stored in a flat list the check would be substantially more complex.

How should I being storing the data and using shouldComponentUpdate (or other methods) to support a smooth UI with hundreds or thousands of tree nodes?

Edit

I've been connecting the store at the top level, and then having to pass the entire store down to subcomponents.

My structure is:

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

The <Node> can do a simple check with shouldComponentUpdate to see if the title has changed, but I have no similar solution to use on the <NodeTree> or <NodeBranch> given the recursive nature of the tree.

It looks like the best solution (thanks @Dan Abramov) would be to connect each <NodeBranch>, rather just connecting at the top level. I'll be testing this this evening.

解决方案

I just added a new example showing just that.
You can run it like this:

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

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

open http://localhost:3000/

这篇关于树结构和React/Redux中的shouldComponentUpdate的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！