Dzielimy się tym co ważne

blog Speednet

Podczas pracy nad jednym z projektów spotkałem interesujący problem. Wyobraź sobie, że masz listę z danymi, która może być wyświetlana jako prosta siatka, bądź bardziej zaawansowany widok ze zdjęciami, opisem itd. Przykład poniżej: Implementacja samego mechanizmu zmiany widoku jest bardzo prosta. Wystarczy zwykły przełącznik, którego stan może być trzymany jako podstawowy useState, bądź nawet jeśli jest taka potrzeba – w storze Redux. Gdzie więc jest problem? Problem można napotkać w momencie kiedy zmieni się widok. Przeglądarka nie zapamiętuje wtedy na którym itemie z listy aktualnie byliśmy, tylko zachowuje pozycję scroll. Wyobraź sobie, że patrzysz aktualnie na Item 5, zmieniasz widok na „szczegółowy” i zamiast Item 5 pojawia się Item 2. Dzieje się tak, ponieważ szczegółowe itemy mają większą wysokość i zmieniają całkowicie widok listy. Przykład możesz zobaczyć tutaj.   Jak można rozwiązać ten problem? Przed zmianą widoku należy sprawdzić oraz zapisać informacje, który item jest aktualnie widoczny. Zmienić widok. Sprawdzić pozycję scroll zapisanego itemu. Ustawić scroll na sprawdzoną wcześniej pozycję. Głównym problemem tych operacji jest wykonanie funkcji tuż przed zmianą widoku. Można oczywiście nasłuchiwać eventu „scroll” i zapisywać z każdym eventem nową informację o aktywnym elemencie, ale nie jest to zbyt optymalne podejście. Idealnie byłoby sprawdzić drzewo DOM zaraz przed zmianą widoku. Dla utrudnienia, powiedzmy, że należy to zrobić BEZ modyfikacji funkcji zmieniającej widok. getSnapshotBeforeUpdate Dla takich sytuacji React przygotował metodę cyklu życia komponentu zwaną getSnapshotBeforeUpdate. Możesz o niej więcej przeczytać tutaj.  Jednak naszym celem nie jest przepisywanie wszystkiego na komponent klasowy. Więc jak to zrobić z hookami…? Using hooks […]

Czytaj dalej

W celu poprawy jakości naszych usług używamy ciasteczek.

Możesz je zablokować poprzez zmianę ustawień przeglądarki.