Nasza aplikacja korzysta z nieskończonego przewijania, aby poruszać się po dużych listach heterogenicznych elementów. Jest kilka zmarszczek:

Nasi użytkownicy mają listę 10 000 pozycji i muszą przewijać 3k +.Są to bogate przedmioty, więc możemy mieć tylko kilkaset w DOM, zanim wydajność przeglądarki stanie się nie do przyjęcia.Przedmioty mają różną wysokość.Elementy mogą zawierać obrazy i pozwalamy użytkownikowi przeskoczyć do określonej daty. Jest to trudne, ponieważ użytkownik może przeskoczyć do punktu na liście, w którym musimy załadować obrazy powyżej rzutni, co spowodowałoby przesuwanie zawartości w dół podczas ładowania. Brak obsługi oznacza, że ​​użytkownik może przeskoczyć do daty, a następnie przejść do wcześniejszej daty.

Znane, niepełne rozwiązania:

https://github.com/guillaumervls/react-infinite-scroll - jest to po prostu prosty element „ładuj więcej, gdy trafimy na dół”. Nie niszczy żadnego z DOM, więc umrze na tysiącach przedmiotów.

http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - Pokazuje, jak przechowywać i przywracać pozycję przewijania podczas wstawiania u górylub wkładanie u dołu, ale nie oba razem.

Nie szukam kodu do kompletnego rozwiązania (choć byłoby świetnie.) Zamiast tego szukam „React way” do modelowania tej sytuacji. Czy jest stan przewijania, czy nie? W jakim stanie powinienem śledzić, aby zachować swoją pozycję na liście? Jaki stan muszę zachować, aby wywołać nowy render, gdy przewijam w pobliżu dolnej lub górnej części tego, co jest renderowane?