react-component / tree

React Tree
https://tree.react-component.now.sh/
MIT License
1.2k stars 484 forks source link

Tree.render() slow for large shallow trees #80

Open naderm opened 7 years ago

naderm commented 7 years ago

It seems that the way that rc-tree renders Tree makes minor updates (such as expanding or selecting a single node) very slow for large trees. This appears to be optimized in the case of deep trees (i.e. many elements hidden behind folders), but not for shallow trees (fewer elements, not hidden by folders).

A simple case be shown with the big-data example. When using x=5, y=500, z=1, there are 1252505 total nodes, but selecting elements is still snappy. When using x=500, y=5, z=1, there are 15500 total nodes, but selecting elements can take up to a second to update.

This might be a no-fix, but it would be helpful for simple actions such as select or expand to only update the relevant nodes. Otherwise interacting with the tree starts feeling laggy above 500 nodes, which seems small compared to other frameworks' TreeViews...

warmhug commented 7 years ago

This situation we know, tell the truth, because we are based on react, so want to make a full-featured and better performance treeview, compared to the use of jQuery will be more difficult.

it would be helpful for simple actions such as select or expand to only update the relevant nodes.

This is a good idea, can consider dividing the data to implement this built-in. But may be able to use dynamic loadData API to achieve at present.

Another problem you said, when you set x=500, y=5, z=1, The select action is very slow. You can also set it like this x=1500, y=0, z=1, thus there are only 1500 total nodes, but also very slow. So, i have already specified this in the document, it's here default

So, please confirm that whether your pr really solve the problem.

In addition, because the tree and tree-select associated, if you modify the tree code, please be sure to test whether the tree-select is working properly, and in reverse.

cc @yesmeck

naderm commented 7 years ago

My PR solves the performance problems in my use-case scenario (~2,000 nodes), however it was quickly thrown together and appears to break in several cases, such as using the expandedKeys prop. I also did not test it at all with tree-select.

I don't know the ins and outs of rc-tree well enough to write a comprehensive patch that works correctly in all use-cases of rc-tree. You are welcome to use my PR as a starting point to fix the remaining bugs. Otherwise I'm happy to just maintain my branch and merge any updates from your upstream repository.

n7best commented 6 years ago

Came from antd TreeSelect, I have a scenario about 210k nodes where y is between 1 and 200, I am currently using dynamic loadData but it still loads way too many tree nodes in some cases, I think virtualize would be a better option like the example for List.

edencorbin commented 5 years ago

Same issue here, drags to a crawl with lots of nodes, especially on drag. operations (rapidly dragging can even freeze the interface). I wanted to mention this other library uses virtualization and can handle huge number of nodes (I tested 5000 with no issues). However, it does not support touch, which is a requirement in our project, not to mention we are standardizing on antd design elements: https://www.npmjs.com/package/react-sortable-tree

tomzacchia commented 2 years ago

@naderm @edencorbin I ran into a similar problem when my Tree had ~6K nodes. Did you pass in the height and itemHeight props? I noticed that enabling virtual had no affect on performance until I passed in the two props mentioned above. https://github.com/react-component/tree/blob/e2da1ce6cdf62bb685254865364f3fec4ed56651/src/Tree.tsx#L184

erselnordlys commented 1 year ago

@tomzacchia omg, thank you! I've been struggling with this issue for a long time. This seems to work just right!

gs-vkinti commented 1 year ago

@tomzacchia @warmhug in my use case we have 5k nodes in tree, we have used the height, itemHeight , virtual to virtualized the tree but we unable to drag node with auto scroll the list(dragging last node to first position). can you please help on this. if you have any example please share with me.

https://codesandbox.io/s/great-dhawan-w95kho