邊緣人的程式網誌

react-window2 Introduce: as last time introduce  react-window  , I had separate the design structure try to understand how it work , and today I’m going use  IntersectionObserverEntry  to ****make simliar as  react-window List  component List design Div design: react-window paremeter is by  px  , here I want did some different is by  hv  , that will be more  availability  on the responsive div1 : we need set max height value when child element is over size will show scroll barmax-height: <parameter>by hvoverflow: auto div2 : here we need set virtual height for scroll barheight:  itemCount * rowheight = total height position: relative row div : per row we need give the top height to align and positionposition: absolutetop: by current indexclassName: tr IntersectionObserverEntry: we need pass two paremeter to  IntersectionObserver option : const options = {root: document.getElementById('List'),rootMargin: `-${rowHeight}px 0px -${rowHeight}px 0px`,threshol

  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