Wpis z mikrobloga

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
  • 5
@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