React Academy · leksjon

Mønstre for kommunikasjon mellom søsken

Samordne to søskenkomponenter gjennom state i den felles overordnede komponenten og callback-props.

Leksjon 3 av 413 trinn

Mønstre for kommunikasjon mellom søsken er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen implementerer De kommunikasjon mellom søskenkomponenter i React ved å koordinere to komponenter gjennom delt tilstand i en felles forelder og callback-props.

Søskenkomponenter kan ikke kommunisere direkte

I React flyter data nedover gjennom props. To søskenkomponenter har ingen direkte forbindelse. All kommunikasjon mellom søskenkomponenter går gjennom den felles forelderen.

Mønsteret: Delt tilstand i forelderen

Forelderen lagrer den delte verdien i tilstanden og sender den til begge søskenkomponentene: Den ene mottar den som data (leser), mens den andre mottar en callback for å endre den (skriver).

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

Leser- og skriversøsken

Skriversøskenet (Picker) kaller callback-funksjonen i forelderen når brukeren gjør et valg. Lesersøskenet (Detail) mottar den resulterende verdien som en prop. Ingen av søskenkomponentene kjenner til den andre.

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

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

Toveiskommunikasjon

Begge søskenkomponentene kan være lesere og skrivere samtidig. Hver av dem mottar den gjeldende verdien OG en onChange-callback. Endringer fra en av søskenkomponentene oppdaterer den delte tilstanden i forelderen, som deretter flyter ned igjen til begge.

Eksempel på synkroniserte skjemafelt

En glidebryter og et tallfelt styrer begge den samme verdien. Begge mottar verdien og onChange fra forelderen. Når én av komponentene endres, oppdateres den andre automatisk.

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)} />
    </>
  );
}

Unngå anti-mønsteret med en hendelsesbuss

Unngå å bruke en global hendelsesutsender (EventEmitter/PubSub) for kommunikasjon mellom søskenkomponenter i React. Dette omgår Reacts dataflyt, slik at tilstanden blir usynlig og feilsøking vanskelig.

Når søskenkomponentene er langt fra hverandre

Hvis søskenkomponentene ligger dypt nestet under forskjellige grener i treet, fører det til unødvendig mye prop-drilling å løfte tilstanden helt opp til den felles forfederen. Da er Context eller et tilstandsbibliotek en passende løsning.

Hold søskenkomponentene frikoblet

Ingen av søskenkomponentene bør importere eller referere til den andre. Forelderen koordinerer dem. Denne frikoblingen gjør det enkelt å bytte ut én søskenkomponent uten å påvirke den andre.

Testing av kommunikasjon mellom søskenkomponenter

Test forelderkomponenten: Simuler en handling i skriversøskenet (via grensesnittet til forelderen), og kontroller at lesersøskenet viser riktig verdi. Forelderen er den testbare koordineringsenheten.

Hurtigsjekk

Hvordan kommuniserer to React-komponenter som er søsken, med hverandre?

Besvar den i den interaktive leksjonen

Oppsummering

Koordiner søskenkomponenter gjennom den felles forelderen: Forelderen lagrer den delte tilstanden, sender data til lesere og callback-funksjoner til skrivere. Ingen av søskenkomponentene trenger å kjenne til den andre.

Neste

Neste leksjon: **Velg riktig plassering for tilstanden** — De skal bruke et beslutningsrammeverk for lokal, løftet eller global tilstand.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mønstre for kommunikasjon mellom søsken» gratis?

Ja – hele teksten i «Mønstre for kommunikasjon mellom søsken» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mønstre for kommunikasjon mellom søsken»?

Samordne to søskenkomponenter gjennom state i den felles overordnede komponenten og callback-props. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Mønstre for kommunikasjon mellom søsken»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Løfte state opp: Prinsipper og eksempler
Prop drilling: Når det skaper problemer og når det er greit
Mønstre for kommunikasjon mellom søsken
Velge riktig plassering av state

← Tilbake til React Academy