Kaip jūs išvengate, kad būsenos atnaujinimai nesukeltų per daug pakartotinio atvaizdavimo?

Question

Accepted Answer

Būsenos pasikeitimai suaktyvina pakartotinį atvaizdavimą, o blogai sustrukturizuota būsena gali sukelti **daug daugiau pakartotinio atvaizdavimo nei reikia** — sulėtinti programą. Pagrindinės strategijos: siauroji prenumerata, būsenos padalijimas, memoizavimas ir būsenos lokalizavimas. ## 1. Prenumeruokite minimalią dalį, kurios jums reikia ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Selectyvus abonementai (Zustand/Redux selektoriai, Jotai atomai) yra didžiausias svertis — komponentai pakartotinai vaizduojami tik tada, kai keičiasi jų konkretus pjūvis, o ne kiekvieną kartą, kai atnaujinamas saugykla. ## 2. Padalinkite būseną / kontekstą, kad sumažintumėte sprogimo spindį ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizuokite komponentus ir reikšmes ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memoizavimas neleidžia vaikams pakartotinai atvaizduoti, kai jų savybės (pagal nuorodą) nepasikeitė — tačiau tai veikia tik tada, kai taip pat išlaikiui savybės/grįžtamuosius žygius referentiškai stabilius (`useCallback`/`useMemo`) ir atnaujinate būseną **nekintamais**. ## 4. Laikykite būseną kuo labiau lokal ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. Nešaugokite suvestinių reikšmių; išvenkite naujų nuorodų kiekvienu atvaizdavimo metu ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Naudokite memoizuotus selektorius išvedintiems duomenims ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Pirmiausia išmatuokite ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Kodėl tai svarbu Per daug pakartotinio atvaizdavimo yra pagrindinis React/būsenoje pagrįstų programų sulėtėjimo šaltinis ir kyla iš to, kaip būsena sustrukturinta ir prenumeruota. Šaltinių rinkinys — siauros selectyvios prenumeratos, padalyta konteksti, memoizavimas su stabiliais nuorodais, nekintami atnaujinimai ir būsenos lokalizavimas — tiesiogiai kontroliuoja pakartotinio atvaizdavimo apimtį. Svarbu, kad prieš optimizavimą turėtumėte **išmatuoti** (Profiler), kad surastumėte tikrąją užsikimšimą, nes neapdairuš memoizavimas prideda sudėtingumą be naudos. Supratimas, kas suaktyvina pakartotinį atvaizdavimą ir kaip jį suvaržyti, yra būtinas norint sukurti produktyvias didelės apimties programas.