React Academy · Oppitunti

Sisaruskomponenttien viestintämallit

Koordinoikaa kahta sisaruskomponenttia jaetun vanhemman tilan ja callback-propsien avulla.

Oppitunti 3/413 vaihetta

Sisaruskomponenttien viestintämallit 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 sisaruskomponenttien välisen viestinnän Reactissa koordinoimalla kahta komponenttia yhteisen ylemmän komponentin tilan ja callback-propien avulla.

Sisaruskomponentit eivät voi viestiä suoraan

Reactissa tiedot kulkevat alaspäin propien kautta. Kahdella sisaruskomponentilla ei ole suoraa yhteyttä toisiinsa. Kaikki sisaruskomponenttien välinen viestintä kulkee niiden yhteisen ylemmän komponentin kautta.

Malli: yhteinen tila ylemmässä komponentissa

Ylempi komponentti säilyttää yhteisen arvon tilassa ja välittää sen molemmille sisaruskomponenteille: toinen vastaanottaa sen tietona (lukija), toinen vastaanottaa callback-funktion sen muuttamista varten (kirjoittaja).

function Parent() {
  const [selected, setSelected] = useState(null);
  return (
    <>
      <Picker onSelect={setSelected} />
      <Detail item={selected} />
    </>
  );
}

Lukija- ja kirjoittajasisarukset

Kirjoittajasisarus (Picker) kutsuu ylemmän komponentin callback-funktiota, kun käyttäjä tekee valinnan. Lukijasisarus (Detail) vastaanottaa tuloksena olevan arvon propina. Kumpikaan sisarus ei tiedä toisesta.

function Picker({ onSelect }) {
  return <button onClick={() => onSelect('item-1')}>Pick item 1</button>;
}

function Detail({ item }) {
  return <p>Selected: {item}</p>;
}

Kaksisuuntainen viestintä

Molemmat sisaruskomponentit voivat toimia samanaikaisesti sekä lukijoina että kirjoittajina. Kumpikin vastaanottaa nykyisen arvon JA onChange-callback-funktion. Kumman tahansa sisaruskomponentin tekemät muutokset päivittävät yhteisen ylemmän komponentin tilan, joka virtaa takaisin molemmille.

Esimerkki synkronoiduista lomakekentistä

Liukusäädin ja numerokenttä ohjaavat samaa arvoa. Molemmat vastaanottavat arvon ja onChange-callback-funktion ylemmältä komponentilta. Kumman tahansa komponentin muuttaminen päivittää toisen automaattisesti.

function VolumeControl() {
  const [vol, setVol] = useState(50);
  return (
    <>
      <input type="range" value={vol} onChange={e => setVol(+e.target.value)} />
      <input type="number" value={vol} onChange={e => setVol(+e.target.value)} />
    </>
  );
}

Tapahtumaväylän vastaisen anti-mallin välttäminen

Välttäkää globaalin tapahtumien lähettäjän (EventEmitter/PubSub) käyttöä sisaruskomponenttien viestintään Reactissa. Se ohittaa Reactin tietovirran, jolloin tila muuttuu näkymättömäksi ja virheenkorjaus vaikeutuu.

Kun sisaruskomponentit ovat kaukana toisistaan

Jos sisaruskomponentit ovat syvällä puun eri haaroissa, tilan nostaminen niiden yhteiseen esi-isään asti aiheuttaa liiallista propien ketjuttamista. Silloin Context tai tilakirjasto on sopiva ratkaisu.

Sisaruskomponenttien pitäminen toisistaan riippumattomina

Kummankaan sisaruskomponentin ei pitäisi tuoda toista sisään tai viitata siihen. Ylempi komponentti toimii koordinaattorina. Tämä riippumattomuus tekee yhden sisaruskomponentin korvaamisesta helppoa ilman vaikutuksia toiseen.

Sisaruskomponenttien viestinnän testaaminen

Testatkaa ylempää komponenttia: simuloikaa kirjoittajasisaruksen toimintoa ylemmän komponentin rajapinnan kautta ja varmistakaa, että lukijasisarus näyttää oikean arvon. Ylempi komponentti on koordinaatiosta vastaava testattava yksikkö.

Pikatarkistus

Miten kaksi Reactin sisaruskomponenttia viestii keskenään?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Koordinoikaa sisaruskomponentit niiden yhteisen ylemmän komponentin kautta: ylempi komponentti säilyttää yhteisen tilan, välittää tiedot lukijoille ja callback-funktiot kirjoittajille. Kummankaan sisaruskomponentin ei tarvitse tietää toisesta.

Seuraavaksi

Seuraava oppitunti: **Oikean tilan sijainnin valitseminen** — sovellatte päätöskehystä paikalliselle, ylemmäs nostetulle tai globaalille tilalle.

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 ”Sisaruskomponenttien viestintämallit” ilmainen?

Kyllä – oppitunnin ”Sisaruskomponenttien viestintämallit” 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 ”Sisaruskomponenttien viestintämallit”?

Koordinoikaa kahta sisaruskomponenttia jaetun vanhemman tilan ja callback-propsien avulla. 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 ”Sisaruskomponenttien viestintämallit”-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

Tilan nostaminen: periaatteet ja esimerkit
Prop drilling: milloin se haittaa ja milloin ei
Sisaruskomponenttien viestintämallit
Oikean tilan sijainnin valitseminen

← Takaisin: React Academy