React Academy · leksjon

Mønsteret Render Props

Send en funksjon som en prop, der funksjonen returnerer JSX, for å dele atferd uten å koble sammen brukergrensesnittet.

Leksjon 1 av 413 trinn

Mønsteret Render Props er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 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 lærer du render props-mønsteret — å sende en funksjon som en prop som returnerer JSX — og når det er nyttig for å dele atferd mellom komponenter.

Hva er render props?

Render props er et mønster der en komponent tar imot en prop som er en funksjon. Komponenten kaller denne funksjonen for å lage det rendere resultatet. Forbrukeren styrer brukergrensesnittet, mens komponenten leverer atferden.

<DataProvider render={data => <UserCard user={data} />} />

Enkelt eksempel på render prop

En Toggle-komponent håndterer tilstanden åpen/lukket og kaller en render prop med den gjeldende tilstanden og en toggle-funksjon. Forbrukeren bestemmer hvordan innholdet skal rendres.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Bruke children som render prop

I stedet for en navngitt render prop kan du bruke `children` som en funksjon. Mange biblioteker (React Router v5, Formik) bruker dette mønsteret — det kalles noen ganger «children as a function».

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Sporing av museposisjon

Et klassisk eksempel på render props: En MouseTracker-komponent sporer markørens posisjon og sender den til en render prop. Enhver forbruker kan vise posisjonen på den måten den ønsker.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Render props kontra egendefinerte hooks

Render props var det foretrukne mønsteret før hooks. Egendefinerte hooks gjør nå det samme på en ryddigere måte: hooken returnerer data og funksjoner, og komponenten bruker dem i sin egen JSX. Hooks foretrekkes i moderne React.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Når render props fortsatt er nyttige

Render props er fortsatt nyttige når: (1) du må sette inn dynamisk rendering på et bestemt sted i treet, (2) du bygger et headless-komponentbibliotek som skiller logikk fra brukergrensesnitt.

Ytelsesadvarsel

Hvis du definerer en render prop inline, opprettes det en ny funksjon ved hver rendering av forelderen. Da hindres underkomponenter med PureComponent/React.memo i å hoppe over unødvendig rendering. Flytt render prop-funksjoner ut til en stabil variabel eller metode.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Kombinere render props

Når du nøster flere komponenter med render props, oppstår det raskt «render prop hell» eller «wrapper hell» — dypt nøstede tilbakekall som er vanskelige å lese. Dette er én av grunnene til at hooks ble introdusert.

Render props i biblioteker

React Router v5 brukte render props for Route. Downshift, Formik og React-Table bruker også varianter av dette mønsteret. Når du forstår render props, blir det enklere å lese og feilsøke kode som bruker disse bibliotekene.

Kort kontrollspørsmål

Hva er den viktigste fordelen med render props-mønsteret sammenlignet med å sende statisk JSX?

Besvar den i den interaktive leksjonen

Oppsummering

Render props sender en funksjon som returnerer JSX. Komponenten leverer atferd, mens forbrukeren leverer brukergrensesnittet. Foretrekk egendefinerte hooks i moderne React, men forstå render props for å kunne lese eksisterende kode og bygge headless-komponenter.

Neste leksjon

Neste leksjon: **Higher-Order Components (HOCs) forklart** — du skal pakke inn komponenter for å sette inn props, beskytte ruter eller legge til logging.

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ønsteret Render Props» gratis?

Ja – hele teksten i «Mønsteret Render Props» 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ønsteret Render Props»?

Send en funksjon som en prop, der funksjonen returnerer JSX, for å dele atferd uten å koble sammen brukergrensesnittet. 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 1 av 4.

Hvor lang tid tar leksjonen «Mønsteret Render Props»?

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

Mønsteret Render Props
Higher-Order Components (HOC-er) forklart
HOC-er kontra Render Props kontra egendefinerte hooks
Refaktorere en HOC til en egendefinert hook

← Tilbake til React Academy