React Academy · Oppitunti

Contextien jakaminen uudelleenrenderöintien rajoittamiseksi

Erottakaa usein muuttuvat arvot vakaista arvoista sijoittamalla ne eri contexteihin.

Oppitunti 1/413 vaihetta

Contextien jakaminen uudelleenrenderöintien rajoittamiseksi on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tässä oppitunnissa opitte jakamaan React Contextit erillisiksi providereiksi, jotta uudelleenrenderöinnit vähenevät, kun vain osa kontekstin arvosta muuttuu.

Contextin uudelleenrenderöintiongelma

Jokainen komponentti, joka kutsuu useContext(MyCtx)-funktiota, renderöidään uudelleen, kun mikä tahansa kontekstin arvon osa muuttuu — vaikka komponentin käyttämä osa ei muuttuisi. Yksi suuri konteksti voi aiheuttaa paljon tarpeettomia uudelleenrenderöintejä.

Jakaminen päivitystiheyden mukaan

Erottakaa usein muuttuvat arvot harvoin muuttuvista arvoista. Sijoittakaa kukin ryhmä omaan kontekstiinsa. Kuluttajat tilaavat vain tarvitsemansa kontekstin.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Data- ja dispatch-kontekstien erottaminen

Yleinen malli on jakaa yksi konteksti tiladatalle, joka aiheuttaa uudelleenrenderöinnin jokaisella muutoksella, ja toinen dispatch-/setter-funktioille, jotka ovat vakaita eivätkä koskaan aiheuta kuluttajien uudelleenrenderöintiä. Pelkästään dispatch-funktioita käyttävät kuluttajat eivät renderöidy uudelleen datan muuttuessa.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Dispatch-kontekstin memoisoiminen

useState-funktion setterit ovat vakaita eli niillä on sama viite jokaisella renderöintikerralla, joten dispatch-kontekstin arvo ei muutu. Jos kuitenkin muodostatte toiminto-objektin, käärikää se useMemo-kutsuun.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Sisäkkäiset providerit

Sijoittakaa useita providereita sisäkkäin komponenttipuuhun. Kuluttajat tuovat käyttöönsä vain tarvitsemansa tietyn kontekstin, mikä pitää tilaukset rajattuina.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Profilointi ennen jakamista

Profiloikaa aina React DevToolsilla ennen kontekstien jakamista. Tarpeettomat uudelleenrenderöinnit ovat ongelma vain, jos ne ovat suorituskyvyn kannalta raskaita. Älkää suunnitelko konteksteja liian monimutkaisiksi, jos niiden uudelleenrenderöinti on nopeaa.

Kontekstien jakamisen kompromissit

Useammat kontekstit tarkoittavat useampia providereita komponenttipuussa. Tämä lisää kokonaisuuden ymmärtämiseen tarvittavaa ajattelua. Jakakaa konteksteja vain, kun profilointi osoittaa suorituskykyongelman, ei ennakolta.

Yhdistäminen React.memon kanssa

Yhdenkin kontekstin kanssa kalliit lapsikomponentit voidaan kääriä React.memoon, jolloin ne renderöidään uudelleen vain propsien muuttuessa — eivät kontekstin muuttuessa. Tämä voi olla yksinkertaisempi vaihtoehto kontekstin jakamiselle.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Yhdistäkää useReducer kontekstiin monimutkaisen tilan hallintaa varten. Tallentakaa tila yhteen kontekstiin ja dispatch-funktio toiseen. Dispatch on vakaa, kun taas tila päivittyy jokaisen toiminnon yhteydessä.

Pikatarkistus

Miksi tilan ja dispatch-funktion jakaminen erillisiin konteksteihin parantaa suorituskykyä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Jakakaa kontekstit päivitystiheyden mukaan: usein muuttuva tila yhteen kontekstiin ja vakaa dispatch/setter toiseen. Profiloikaa ensin, jakakaa vain tarvittaessa ja harkitkaa React.memota yksinkertaisempana vaihtoehtona.

Seuraavaksi

Seuraava oppitunti: **Kontekstiarvojen memoisoiminen useMemolla** — käärätte kontekstin arvo-objektit useMemo-kutsuun, jotta kuluttajat eivät renderöidy uudelleen muuttumattoman datan vuoksi.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Contextien jakaminen uudelleenrenderöintien rajoittamiseksi” ilmainen?

Kyllä – oppitunnin ”Contextien jakaminen uudelleenrenderöintien rajoittamiseksi” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Contextien jakaminen uudelleenrenderöintien rajoittamiseksi”?

Erottakaa usein muuttuvat arvot vakaista arvoista sijoittamalla ne eri contexteihin. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Contextien jakaminen uudelleenrenderöintien rajoittamiseksi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Contextien jakaminen uudelleenrenderöintien rajoittamiseksi
Context-arvojen memoizointi useMemolla
Context-valitsijamalli
Milloin contextia ei pidä käyttää

← Takaisin: React Academy