Uczę się Reacta klepiąc własny program (https://github.com/tarsa/TarsaLZP/tree/master/scalajs/TarsaLZP) i zastanawiam się nad sposobami unikania przerenderowania elementów, które się nie zmieniły. Chodzi mi o unikanie wywołania metody render, która tworzy wirtualnego DOMa, bo unikaniem renderowania rzeczywistego DOMa zajmuje się oczywiście sam React.
Pytanie w zasadzie powinno brzmieć: czy zawsze wywołanie metody render w nadkomponencie wywoła metodę render we wszystkich podkomponentach?
<mała_dygresja>
Do obsługi stanu wykorzystuję bibliotekę https://github.com/ochrons/diode i tam jest tak, że jest jedno miejsce gdzie znajduje się stan - circuit. Circuit oprócz przetrzymywania stanu zajmuje się kolejkowaniem zdarzeń które go aktualizują, ale przede wszystkim można się zapiąć na niego, czyli nasłuchiwać na zmiany w przetrzymywanym stanie. Diode udostępnia specjalny komponent (nakładkę), który opakowuje dowolny inny komponent Reactowy i nasłuchuje na zmiany w modelu i jeśli ten model się zmieni to nakładka się przerenderowuje.
</mała_dygresja>
Obecnie mam taką hierarchię:
- MainView_nasłuchujący,
-- coś_tam_1,
-- OptionsView_nasłuchujący,
-- coś_tam_2,
Z obecnych eksperymentów wynika, że przy renderowaniu MainView_nasłuchujący podkomponent OptionsView_nasłuchujący zawsze będzie odmonowany, zamontowany i przerenderowany.
Debug logi:
[MainView] componentWillReceiveProps
[OptionsView] componentWillUnmount
[OptionsView] componentWillMount
[OptionsView] componentDidMount
[MainView] componentDidUpdate
Zastanawiam się czy w ogóle 'walka' z przerenderowywaniem podkomponentu w ogóle ma sens i jest zgodna z Reactowymi wzrocami. Zamiast kombinować mógłbym opakować wszystkie dynamiczne podkomponenty komponentu MainView_nasłuchujący w nasłuchujące nakładki z Diody i wtedy MainView_nasłuchujący zamieniłby się w statyczny MainView. Konkretniej wyszłoby coś takiego:
- MainView,
-- Coś_Tam_1_nasłuchujący,
-- OptionsView_nasłuchujący,
-- Coś_Tam_2_nasłuchujący,
W tym przypadku nie ma tego problemu, że nadkomponent się przerenderowuje i nie ma też specjalnych kombinacji z unikaniem wywołań metody render. Z drugiej strony muszę jednak robić klasy z komponentami Coś_Tam_1_nasłuchujący i Coś_Tam_2_nasłuchujący. To jest dobre rozwiązanie czy znacie jakieś lepsze?