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 like is use arrary function slice to accomplish replace

Survey Result

I think it is use IntersectionObserver function to accomplish virtual scrolling , it could help you watch the element and it is Intersecting that will trigger fucntional do somthing , so next artical I will show you how did I do the simliar component as like react-window