React Academy · Oppitunti

Context-valitsijamalli

Toteuttakaa yksinkertainen valitsijahook, joka renderöityy uudelleen vain contextin osan muuttuessa.

Oppitunti 3/413 vaihetta

Context-valitsijamalli on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 toteutatte kontekstiselektorihookin, joka tilaa komponentille vain osan kontekstin tilasta ja estää uudelleenrenderöinnit, kun kontekstin toisiinsa liittymättömät osat muuttuvat.

Selector-ongelma

useContext aiheuttaa uudelleenrenderöinnin, kun mikä tahansa kontekstin osa muuttuu. Jos komponentti tarvitsee vain käyttäjän nimen, mutta kontekstissa on myös ilmoitusluettelo, ilmoituksen lisääminen renderöi nimikomponentin tarpeettomasti uudelleen.

Mikä on selector?

Selector on funktio, joka poimii tietyn tilan osan suuremmasta tilaobjektista: `state => state.user.name`. Selector-hook tilaa kontekstia, mutta käynnistää uudelleenrenderöinnin vain, kun valittu arvo muuttuu.

Yksinkertainen selector-hook

Rakentakaa useSelector-hook, joka lukee kontekstin ja käyttää selectorin tulosta useMemo-kutsun riippuvuutena. Komponentti renderöidään uudelleen vain, kun valittu arvo muuttuu.

function useAppSelector(selector) {
  const state = useContext(AppCtx);
  return useMemo(() => selector(state), [state, selector]);
}

// Consumer only re-renders when user.name changes
const name = useAppSelector(s => s.user.name);

Pintatason yhtäsuuruusvertailu

Selectorilla käytetty useMemo aiheuttaa silti uudelleenrenderöinnin, jos selector palauttaa jokaisella kutsulla uuden objekti- tai taulukkoviitteen, esimerkiksi `s => s.items.filter(...)`. Käyttäkää shallow equality -vertailua ohittamaan uudelleenrenderöinnit, kun sisältö on sama.

import { useRef } from 'react';

function useSelector(selector) {
  const state = useContext(AppCtx);
  const selected = selector(state);
  const ref = useRef(selected);
  if (!shallowEqual(ref.current, selected)) {
    ref.current = selected;
  }
  return ref.current;
}

use-context-selector-kirjasto

Tuotantokäyttöön **use-context-selector**-kirjasto tarjoaa useContextSelector-hookin, jossa on tehokas tilaus- ja yhtäsuuruusvertailu — ilman ulkoisia tilanhallintakirjastoja.

import { useContextSelector } from 'use-context-selector';

const name = useContextSelector(AppCtx, s => s.user.name);

Zustand selector-natiivina ratkaisuna

Zustandin `useStore(selector)`-hookissa on sisäänrakennettu selector-tuki ja shallow equality -vertailu valmiina, joten se sopii luontevasti suuriin tilapuihin, joissa hienojakoiset tilaukset ovat tärkeitä.

const name = useAppStore(state => state.user.name);

Milloin selectorit ovat liioittelua

Jos kontekstin päivitykset ovat harvinaisia ja kuluttajien uudelleenrenderöinti on kevyttä, selectorit lisäävät monimutkaisuutta ilman mitattavaa hyötyä. Profiloikaa ensin — optimoikaa aina näyttöön perustuvasti.

Selector-funktioiden memoisoiminen

Jos luotte selectorin komponentin rungossa suoraan, se saa jokaisella renderöintikerralla uuden funktioviitteen, mikä voi rikkoa memoisoimisen. Määritelkää selectorit komponentin ulkopuolella tai käyttäkää useCallbackia.

// Outside component — stable reference
const selectName = s => s.user.name;

function Profile() {
  const name = useAppSelector(selectName);
  return <p>{name}</p>;
}

Johdetut selectorit

Koostakaa selectoreita kutsumalla yhtä toisen sisältä. Johdetut selectorit laskevat arvoja perustason selectoreista ja pitävät liiketoimintalogiikan poissa komponenteista.

const selectFullName = s => s.user.firstName + ' ' + s.user.lastName;

Pikatarkistus

Miksi selector-funktiot kannattaa määritellä komponentin rungon ulkopuolella, kun niitä käytetään useContextSelectorin tai useMemon kanssa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Selectorit poimivat osan kontekstin tilasta ja estävät uudelleenrenderöinnit, kun toisiinsa liittymättömät osat muuttuvat. Määritelkää selectorit komponenttien ulkopuolella vakaiden viitteiden saamiseksi. Käyttäkää tuotantotason selector-tukeen use-context-selectoria tai Zუსტandia.

Seuraavaksi

Seuraava oppitunti: **Milloin Contextia ei pidä käyttää** — opitte tunnistamaan tilanteet, joissa propsien välittäminen, kompositio tai tilanhallintakirjasto sopii paremmin kuin Context.

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 ”Context-valitsijamalli” ilmainen?

Kyllä – oppitunnin ”Context-valitsijamalli” 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 ”Context-valitsijamalli”?

Toteuttakaa yksinkertainen valitsijahook, joka renderöityy uudelleen vain contextin osan muuttuessa. 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 3/4.

Kuinka kauan ”Context-valitsijamalli”-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