Make a react-window (1)
Introduction if your DOM is to much that slow dow your render performance, most of case will happend on the table element, we had react-window could help us resolve this issue react-window FixedList we have to give it parameter: height : scroll list height itemcount : row arrary length itemSize : row height width : scroll list width actually it already resolve to much DOM problem , but I want dig more deep tech that I could understand how it work and I could did more flexible design DOM no need rely the plugin Let see the detail: how parameter work: firsrt div: height is for first div make ****max-height and we also give it the overflow properties second div: height ****is itemcount * itemSize that we could render the scroll row div: we are use absoulte and give it index * itemSize = top Height when we are scrolling that you can find it will change : row top height replace the DOM tree the row DOM won’t be increase or decrease , it’s seem