React Academy · Oppitunti

Render props -malli

Välittäkää propsina funktio, joka palauttaa JSX:ää, jotta voitte jakaa toiminnallisuutta sitomatta käyttöliittymiä toisiinsa.

Oppitunti 1/413 vaihetta

Render props -malli 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 render prop -mallin — funktion välittämisen propina niin, että se palauttaa JSX:ää — ja opitte, milloin siitä on hyötyä toiminnallisuuden jakamiseen komponenttien välillä.

Mikä on render prop?

Render props on malli, jossa komponentti hyväksyy funktion sisältävän propin. Komponentti kutsuu tätä funktiota tuottaakseen renderöidyn tuloksensa. Kuluttaja hallitsee käyttöliittymää, ja komponentti tarjoaa toiminnallisuuden.

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

Yksinkertainen render prop -esimerkki

Toggle-komponentti hallitsee avattu/suljettu-tilaa ja kutsuu render propia nykyisellä tilalla ja vaihtofunktiolla. Kuluttaja päättää, miten sisältö renderöidään.

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

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

childrenin käyttäminen render propina

Nimetyn render propin sijaan voitte käyttää `children`-propia funktiona. Monet kirjastot, kuten React Router v5 ja Formik, käyttävät tätä mallia — sitä kutsutaan joskus nimellä 'children funktiona'.

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

Hiiren sijainnin seuranta

Klassinen esimerkki render propien käytöstä: MouseTracker-komponentti seuraa hiiren osoittimen sijaintia ja välittää sen render propille. Kukin kuluttaja voi näyttää sijainnin haluamallaan tavalla.

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 propit ja mukautetut hookit

Render propit olivat ensisijainen malli ennen hookeja. Mukautetut hookit tekevät nykyään saman asian selkeämmin: hook palauttaa dataa ja funktioita, ja komponentti käyttää niitä omassa JSX:ssään. Hookeja suositaan nykyisessä Reactissa.

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

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

Milloin render propit ovat edelleen hyödyllisiä

Render propit ovat edelleen hyödyllisiä, kun: (1) tarvitsette dynaamista renderöintiä tiettyyn kohtaan komponenttipuussa tai (2) rakennatte headless-komponenttikirjastoa, joka erottaa logiikan käyttöliittymästä.

Suorituskykyä koskeva varoitus

Render propin määrittäminen suoraan komponentin sisällä luo uuden funktion jokaisella ylätason komponentin renderöintikerralla, mikä estää PureComponent/React.memo-komponentteja ohittamasta renderöintiä. Siirtäkää render prop -funktiot vakaaseen muuttujaan tai metodiin.

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

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

Render propien koostaminen

Useiden render prop -komponenttien sisäkkäin sijoittaminen luo nopeasti niin sanotun render prop -helvetin tai wrapper-helvetin — syvästi sisäkkäisiä callback-funktioita, joita on vaikea lukea. Tämä on yksi syy siihen, miksi hookit otettiin käyttöön.

Render propit kirjastoissa

React Router v5 käytti Routessa render propia. Myös Downshift, Formik ja React-Table käyttävät sen muunnelmia. Render propien ymmärtäminen auttaa lukemaan ja selvittämään näitä kirjastoja käyttävää koodia.

Pikatarkistus

Mikä on render prop -mallin tärkein etu staattisen JSX:n välittämiseen verrattuna?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Render propit välittävät funktion, joka palauttaa JSX:ää. Komponentti tarjoaa toiminnallisuuden, ja kuluttaja käyttöliittymän. Suosikaa mukautettuja hookeja nykyisessä Reactissa, mutta opetelkaa render propit olemassa olevan koodin lukemista ja headless-komponenttien rakentamista varten.

Seuraavaksi

Seuraava oppitunti: **Korkeamman asteen komponentit (HOC:t) selitettynä** — opitte käärimään komponentteja propien lisäämistä, reittien suojaamista tai lokitusta varten.

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 ”Render props -malli” ilmainen?

Kyllä – oppitunnin ”Render props -malli” 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 ”Render props -malli”?

Välittäkää propsina funktio, joka palauttaa JSX:ää, jotta voitte jakaa toiminnallisuutta sitomatta käyttöliittymiä toisiinsa. 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 ”Render props -malli”-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

Render props -malli
Higher-Order Components (HOC) selitettynä
HOC vai Render Props vai Custom Hooks
HOC:n refaktorointi Custom Hookiksi

← Takaisin: React Academy