React Academy · Oppitunti

Higher-Order Components (HOC) selitettynä

Käärikää komponentteja propsien lisäämiseksi, reittien suojaamiseksi tai lokituksen lisäämiseksi HOC-tehtaiden avulla.

Oppitunti 2/413 vaihetta

Higher-Order Components (HOC) selitettynä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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, mitä korkeamman asteen komponentit (HOC:t) ovat, miten niitä kirjoitetaan, mihin niitä yleensä käytetään ja millaisia kompromisseja niihin liittyy hookeihin verrattuna.

Mikä on HOC?

Korkeamman asteen komponentti on funktio, joka ottaa komponentin syötteenä ja palauttaa uuden, laajennetun komponentin. HOC lisää toiminnallisuutta, kuten propseja, autentikoinnin tarkistuksia tai lokitusta, muuttamatta alkuperäistä komponenttia.

// HOC signature
function withEnhancement(WrappedComponent) {
  return function Enhanced(props) {
    // add behaviour here
    return <WrappedComponent {...props} extraProp="value" />;
  };
}

Autentikoinnin tarkistava HOC

Yleinen HOC ohjaa todentamattomat käyttäjät kirjautumissivulle. Alkuperäisen komponentin ei tarvitse tietää autentikointilogiikasta mitään.

function withAuth(Component) {
  return function AuthGuard(props) {
    const isLoggedIn = useAuth();
    if (!isLoggedIn) return <Navigate to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(DashboardPage);

Lokitusta tekevä HOC

HOC voi kirjata jokaisen renderöinnin komponentin nimen ja propien kanssa virheenkorjausta varten. Käärikää mikä tahansa komponentti withLoggerilla lisätäksenne seurantaa.

function withLogger(Component) {
  return function Logged(props) {
    console.log('[render]', Component.displayName, props);
    return <Component {...props} />;
  };
}

Propien välittäminen eteenpäin

Välittäkää aina kaikki vastaanotetut propit käärittyyn komponenttiin muodossa `{...props}`. Jos ette tee näin, alkuperäisen komponentin API rikkoutuu.

return function HOC(props) {
  return <WrappedComponent {...props} injectedProp={value} />;
};

displayNamen asettaminen

HOC:n palauttamat komponentit menettävät nimensä React DevToolsissa. Asettakaa merkityksellinen displayName, jotta tunnistatte ne komponenttipuusta.

function withAuth(Component) {
  function AuthGuard(props) { /* ... */ }
  AuthGuard.displayName = 'withAuth(' + (Component.displayName || Component.name) + ')';
  return AuthGuard;
}

Refien välittäminen

HOC:t estävät refien välittämisen oletusarvoisesti. Käyttäkää HOC:n sisällä `React.forwardRef`-funktiota välittääksenne refit käärittyyn komponenttiin.

function withStyle(Component) {
  return React.forwardRef(function (props, ref) {
    return <Component ref={ref} {...props} className="styled" />;
  });
}

HOC:t, render propit ja hookit

HOC:t lisäävät propseja ja voivat suojata reittejä. Render propit välittävät dynaamisen käyttöliittymän. Mukautetut hookit irrottavat logiikan. Nykyisessä Reactissa hookeja suositaan, koska ne välttävät wrapper-helvetin ja ovat helpompia koostaa. HOC:t ovat hyödyllisiä luokkakomponenttien tai kolmannen osapuolen integraatioiden kanssa.

Wrapper-helvetti

Useiden HOC:ien käyttäminen luo komponenttipuuhun syvän sisäkkäisyyden: `withTheme(withAuth(withLogger(MyPage)))`. DevTools näyttää useita nimettömiä wrapper-tasoja. Hookit välttävät tämän kokonaan.

HOC:t käytännössä

Redixin `connect()`, React Router v5:n `withRouter()` ja MobX:n `observer()` ovat kaikki HOC:eja. HOC:ien ymmärtäminen auttaa työskentelemään näitä vanhempia kirjastojen rajapintoja käyttäessä.

Pikatarkistus

Mitä korkeamman asteen komponentin on aina tehtävä vastaanottamilleen propseille?

Vastaa interaktiivisessa oppitunnissa

Kertaus

HOC:t ovat funktioita, jotka ottavat komponentin ja palauttavat laajennetun komponentin. Ne lisäävät propseja, suojaavat reittejä ja lisäävät lokitusta. Välittäkää propit aina eteenpäin, asettakaa displayName ja välittäkää refit eteenpäin. Suosikaa hookeja nykyisessä Reactissa.

Seuraavaksi

Seuraava oppitunti: **HOC:t vs. render propit vs. mukautetut hookit** — vertailette kolmea koodinjakamisstrategiaa luettavuuden, testattavuuden ja koostettavuuden näkökulmasta.

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 ”Higher-Order Components (HOC) selitettynä” ilmainen?

Kyllä – oppitunnin ”Higher-Order Components (HOC) selitettynä” 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 ”Higher-Order Components (HOC) selitettynä”?

Käärikää komponentteja propsien lisäämiseksi, reittien suojaamiseksi tai lokituksen lisäämiseksi HOC-tehtaiden 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 2/4.

Kuinka kauan ”Higher-Order Components (HOC) selitettynä”-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