Polnoye Rukovodstvo po Optimizatsii Proizvoditelnosti React
Ot memo do server components — prakticheskoye rukovodstvo po uskoreniyu React-prilozheniya bez pereuslozhneniya.
Optimizatsiya proizvoditelnosti v React imeyet problemu s reputatsiyey. Sprosite desyat razrabotchikov, kak uskorit React-prilozheniye, i vosem skazhut «useMemo i useCallback dlya vsego». Ostavshiyesya dva skazhut «prezhdevremennaya optimizatsiya — koren vsekh zol» i uydut. Obe gruppy ne pravy, i obe gruppy vypuskayut prilozheniya, kotoryye libo izlishne slozhny, libo izlishne medlenny.
Realnost boleye nyuansirovana. Modelya renderizatsii React effektivna dlya bolshinstva sluchayev iz korobki, no sushestvuyut khorosho izuchennyye patterny, gde ona dayot sboy. Eto rukovodstvo pokryvayet kazhdyy vazhnyy metod optimizatsii React — kak oni rabotayut, kogda pomogayut i, chto kriticheski vazhno, kogda vredyat. Tsel ne v tom, chtoby zastavit vas primenyat memo povsemestno. Ona v tom, chtoby dat vam mentalnuyu model proizvoditelnosti, pri kotoroy pravilnyy vybor ochevidno v lyuboy situatsii.
Ponimaniye, kogda React pererenderivayet
Prezhde chem chto-libo optimizirovat, nuzhno ponimat, chto vyzyvayet pererender. React pererenderivayet komponent, kogda menyayetsya yego sostoyaniye, kogda pererenderivayetsya roditelskaya komponenta ili kogda menyayetsya znacheniye konteksta, kotoryy on potreblyayet. Zvuchit prosto, no kaskadnyy effekt — imenno tam, gde pryachutsya problemy proizvoditelnosti.
Kogda roditelskaya komponenta pererenderivayetsya, kazhdyy docherniy komponent pererenderivayetsya po umolchaniyu — dazhe yesli props dochernego komponenta ne izmenilis. React delayet eto, potomu chto ne mozhet znat, zavisit li docherniy komponent ot sostoyaniya roditelya, bez vypolneniya yego funktsii render. Eto ne oshibka; eto dizaynerskoye resheniye, kotoroye derzhit model sravneniya React prostoy i predskazuyemoy. No eto oznachayet, chto izmeneniye sostoyaniya v komponente vysokogo urovnya mozhet zapustit pererendery v desyatkakh ili sotnyakh potomkov.