[Q.....z]

Pod prysznicem wymyśliłem sposób na renderowanie długich list w #react, do których elementy są jedynie dodawane na koniec (np. scrollowanie feed) i bez użycia wirtualizacji (react-virtualized/react-window/virtuoso).

Otóż ładujemy naraz powiedzmy 30 elementów i umieszczamy je w czystym komponencie (ang. pure component), żeby przy przerenderowaniu komponentu wyżej w drzewie nie odbywało się pogodzenie (ang. reconcillation). Po 10-krotnym załadowaniu mamy już 300 elementów, ale tylko 10 porównań zamiast 300 przy ładowaniu kolejnego chunka. Przy 3000 elementów wydajność będzie nadal rozsądna, a raczej mało kto dojdzie do takiej liczby.

Może czegoś nie zauważyłem, proszę o ocenę pomysłu. ( ͡° ͜ʖ ͡°)

#reactjs #vuejs #angular #angularjs #programowanie #webdev

[WielkiElektronig]

@Quiz daje olejke

[Futhark]

@Quiz: ale po co tak zamiast virtual lista?

[S.....8]

@Quiz: No dobra ale jak ktos wyzej wspomnial, sa lepsze sposoby ktore juz ktos wymyslil

[h5n1]

@Quiz: właśnie odkryłeś https://developer.mozilla.org/pl/docs/Web/API/Document/createDocumentFragment

[Q.....z]

@Futhark:
- prostota (brak zabawy ze zmiennymi wysokościami elementów i wysokością kontenera)
- mniejszy końcowy plik JS
- nieznacznie krótsze pierwsze wyrenderownaie (TTFP)
Oczywiście use case jest wąski, gdyby dodawać od początku to wydajność prawdopodobnie byłaby o wiele gorsza (może da się to obejść przy użyciu flex-direction: *-reverse?)

@h5n1: to są dwie rózne rzeczy, równie dobrze mógłbym wsadzić elementy w diva