React Context ir Props: teisingos būsenos paskirstymo strategijos pasirinkimas

Nuolat besikeičiančiame front-end kūrimo pasaulyje, teisingos būsenos valdymo strategijos pasirinkimas yra lemiamas kuriant palaikomas, mastelį atitinkančias ir našias React programas. Du pagrindiniai būsenos paskirstymo mechanizmai yra Props ir React Context API. Šiame straipsnyje pateikiamas išsamus jų palyginimas, analizuojant jų stipriąsias ir silpnąsias puses bei praktinius pritaikymus, siekiant padėti jums priimti pagrįstus sprendimus savo projektuose.

Props supratimas: komponentų komunikacijos pagrindas

Props (sutrumpinimas iš angl. properties – savybės) yra pagrindinis būdas perduoti duomenis iš tėvinio komponento į vaikinį React programose. Tai yra vienakryptis duomenų srautas, reiškiantis, kad duomenys keliauja žemyn komponentų medžiu. Props gali būti bet kokio JavaScript duomenų tipo, įskaitant eilutes, skaičius, logines reikšmes, masyvus, objektus ir net funkcijas.

Props privalumai:

• Aiškus duomenų srautas: Props sukuria aiškų ir nuspėjamą duomenų srautą. Lengva atsekti, iš kur duomenys atsiranda ir kaip jie naudojami, tikrinant komponentų hierarchiją. Tai supaprastina kodo derinimą ir palaikymą.
• Komponentų pakartotinis panaudojamumas: Komponentai, kurie gauna duomenis per props, yra iš prigimties labiau pakartotinai panaudojami. Jie nėra glaudžiai susiję su konkrečia programos būsenos dalimi.
• Paprasta suprasti: Props yra fundamentali React koncepcija, kurią kūrėjams, net ir naujokams, yra lengva suvokti.
• Testuojamumas: Komponentai, naudojantys props, yra lengvai testuojami. Galima tiesiog perduoti skirtingas props reikšmes, siekiant imituoti įvairius scenarijus ir patikrinti komponento elgseną.

Props trūkumai: Prop Drilling

Pagrindinis trūkumas, pasikliaujant tik props, yra problema, žinoma kaip „prop drilling“. Tai atsitinka, kai giliai įdėtam komponentui reikia prieigos prie duomenų iš tolimo protėvinio komponento. Duomenys turi būti perduodami per tarpinius komponentus, net jei tie komponentai tiesiogiai tų duomenų nenaudoja. Tai gali sukelti:

• Išpūstas kodas: Komponentų medis tampa perkrautas nereikalingais prop deklaravimais.
• Sumažėjęs palaikomumas: Duomenų struktūros pakeitimai protėviniame komponente gali reikalauti pakeitimų keliuose tarpiniuose komponentuose.
• Padidėjęs sudėtingumas: Suprasti duomenų srautą tampa sunkiau, kai komponentų medis auga.

Prop Drilling pavyzdys:

Įsivaizduokite el. prekybos programą, kurioje vartotojo autentifikavimo raktas yra reikalingas giliai įdėtame komponente, pavyzdžiui, produkto detalių skiltyje. Jums gali tekti perduoti raktą per komponentus kaip <App>, <Layout>, <ProductPage> ir galiausiai į <ProductDetails>, net jei tarpiniai komponentai patys to rakto nenaudoja.

function App() {
  const authToken = "some-auth-token";
  return <Layout authToken={authToken} />;
}

function Layout({ authToken }) {
  return <ProductPage authToken={authToken} />;
}

function ProductPage({ authToken }) {
  return <ProductDetails authToken={authToken} />;
}

function ProductDetails({ authToken }) {
  // Use the authToken here
  return <div>Product Details</div>;
}

Pristatome React Context: būsenos dalijimasis tarp komponentų

React Context API suteikia būdą dalintis reikšmėmis, tokiomis kaip būsena, funkcijos ar net stiliaus informacija, su React komponentų medžiu, nereikalaujant rankiniu būdu perduoti props kiekviename lygyje. Jis sukurtas spręsti „prop drilling“ problemą, palengvinant globalių ar visos programos duomenų valdymą ir prieigą prie jų.

Kaip veikia React Context:

1. Sukurkite kontekstą: Naudokite React.createContext(), kad sukurtumėte naują konteksto objektą.
2. Tiekėjas (Provider): Apgaubkite savo komponentų medžio dalį su <Context.Provider>. Tai leidžia komponentams tame submedyje pasiekti konteksto reikšmę. Tiekėjo value prop nustato, kokie duomenys yra prieinami vartotojams.
3. Vartotojas (Consumer): Naudokite <Context.Consumer> arba useContext hook, kad pasiektumėte konteksto reikšmę komponente.

React Context privalumai:

• Pašalina Prop Drilling: Context leidžia jums dalintis būsena tiesiogiai su komponentais, kuriems jos reikia, nepriklausomai nuo jų padėties komponentų medyje, taip pašalinant poreikį perduoti props per tarpinius komponentus.
• Centralizuotas būsenos valdymas: Context gali būti naudojamas valdyti visos programos būseną, pavyzdžiui, vartotojo autentifikavimą, temos nustatymus ar kalbos parinktis.
• Pagerintas kodo skaitomumas: Sumažinus „prop drilling“, context gali padaryti jūsų kodą švaresnį ir lengviau suprantamą.

React Context trūkumai:

• Galimos našumo problemos: Kai konteksto reikšmė pasikeičia, visi komponentai, kurie vartoja tą kontekstą, bus persikrauti, net jei jie faktiškai nenaudoja pasikeitusios reikšmės. Tai gali sukelti našumo problemų, jei nėra atidžiai valdoma.
• Padidėjęs sudėtingumas: Pernelyg didelis context naudojimas gali apsunkinti duomenų srauto supratimą jūsų programoje. Tai taip pat gali apsunkinti komponentų testavimą atskirai.
• Glaudus susiejimas: Komponentai, kurie vartoja context, tampa glaudžiau susiję su context tiekėju. Dėl to gali būti sunkiau pakartotinai naudoti komponentus skirtingose programos dalyse.

React Context naudojimo pavyzdys:

Grįžkime prie autentifikavimo rakto pavyzdžio. Naudodami context, galime pateikti raktą aukščiausiame programos lygmenyje ir pasiekti jį tiesiogiai <ProductDetails> komponente, neperduodant jo per tarpinius komponentus.

import React, { createContext, useContext } from 'react';

// 1. Create a Context
const AuthContext = createContext(null);

function App() {
  const authToken = "some-auth-token";
  return (
    // 2. Provide the context value
    <AuthContext.Provider value={authToken}>
      <Layout />
    </AuthContext.Provider>
  );
}

function Layout({ children }) {
  return <ProductPage />;
}

function ProductPage({ children }) {
  return <ProductDetails />;
}

function ProductDetails() {
  // 3. Consume the context value
  const authToken = useContext(AuthContext);
  // Use the authToken here
  return <div>Product Details - Token: {authToken}</div>;
}

Context ir Props: detalus palyginimas

Štai lentelė, apibendrinanti pagrindinius Context ir Props skirtumus:

Savybė	Props	Context
Duomenų srautas	Vienakryptis (iš tėvinio į vaikinį)	Globalus (pasiekiamas visiems komponentams Provider viduje)
Prop Drilling	Linkęs į prop drilling	Pašalina prop drilling
Komponentų pakartotinis panaudojamumas	Aukštas	Potencialiai žemesnis (dėl priklausomybės nuo konteksto)
Našumas	Paprastai geresnis (persikrauna tik komponentai, gaunantys atnaujintus props)	Potencialiai prastesnis (persikrauna visi vartotojai, kai keičiasi konteksto reikšmė)
Sudėtingumas	Žemesnis	Aukštesnis (reikalingas Context API supratimas)
Testuojamumas	Lengvesnis (galima tiesiogiai perduoti props testuose)	Sudėtingesnis (reikia imituoti (mock) kontekstą)

Teisingos strategijos pasirinkimas: praktiniai aspektai

Sprendimas, ar naudoti Context, ar Props, priklauso nuo konkrečių jūsų programos poreikių. Štai keletas gairių, padėsiančių jums pasirinkti teisingą strategiją:

Naudokite Props, kai:

• Duomenys reikalingi tik nedideliam komponentų skaičiui: Jei duomenis naudoja tik keli komponentai, o komponentų medis yra gana negilus, props dažniausiai yra geriausias pasirinkimas.
• Norite išlaikyti aiškų ir nedviprasmišką duomenų srautą: Props leidžia lengvai atsekti, iš kur duomenys atsiranda ir kaip jie yra naudojami.
• Komponentų pakartotinis panaudojamumas yra pagrindinis prioritetas: Komponentai, kurie gauna duomenis per props, yra labiau pakartotinai panaudojami skirtinguose kontekstuose.
• Našumas yra kritiškai svarbus: Props paprastai užtikrina geresnį našumą nei context, nes persikrauna tik tie komponentai, kurie gauna atnaujintus props.

Naudokite Context, kai:

• Duomenys reikalingi daugeliui komponentų visoje programoje: Jei duomenis naudoja daug komponentų, ypač giliai įdėtų, context gali pašalinti „prop drilling“ ir supaprastinti jūsų kodą.
• Reikia valdyti globalią arba visos programos būseną: Context puikiai tinka valdyti tokius dalykus kaip vartotojo autentifikavimas, temos nustatymai, kalbos parinktys ar kiti duomenys, kurie turi būti prieinami visoje programoje.
• Norite išvengti props perdavimo per tarpinius komponentus: Context gali žymiai sumažinti šabloninio kodo kiekį, reikalingą duomenims perduoti žemyn komponentų medžiu.

Geriausios React Context naudojimo praktikos:

• Atsižvelkite į našumą: Venkite be reikalo atnaujinti konteksto reikšmes, nes tai gali sukelti visų vartojančių komponentų persikrovimą. Apsvarstykite galimybę naudoti memoizacijos technikas arba padalinti savo kontekstą į mažesnius, labiau sufokusuotus kontekstus.
• Naudokite Context selektorius: Bibliotekos, tokios kaip use-context-selector, leidžia komponentams prenumeruoti tik tam tikras konteksto reikšmės dalis, taip sumažinant nereikalingus persikrovimus.
• Nepiktnaudžiaukite Context: Context yra galingas įrankis, bet tai nėra universalus sprendimas. Naudokite jį protingai ir apsvarstykite, ar kai kuriais atvejais props nebūtų geresnis pasirinkimas.
• Apsvarstykite galimybę naudoti būsenos valdymo biblioteką: Sudėtingesnėms programoms apsvarstykite galimybę naudoti specializuotą būsenos valdymo biblioteką, pavyzdžiui, Redux, Zustand ar Recoil. Šios bibliotekos siūlo pažangesnes funkcijas, tokias kaip „time-travel“ derinimas ir middleware palaikymas, kurios gali būti naudingos valdant didelę ir sudėtingą būseną.
• Pateikite numatytąją reikšmę: Kuriant kontekstą, visada pateikite numatytąją reikšmę naudodami React.createContext(defaultValue). Tai užtikrina, kad komponentai vis tiek galės tinkamai veikti, net jei jie nėra apgaubti tiekėju (provider).

Globalūs aspektai būsenos valdymui

Kuriant React programas globaliai auditorijai, būtina atsižvelgti į tai, kaip būsenos valdymas sąveikauja su internacionalizacija (i18n) ir lokalizacija (l10n). Štai keletas konkrečių dalykų, kuriuos reikėtų turėti omenyje:

• Kalbos nustatymai: Naudokite Context arba būsenos valdymo biblioteką, kad saugotumėte ir valdytumėte vartotojo pageidaujamą kalbą. Tai leidžia dinamiškai atnaujinti programos tekstą ir formatavimą atsižvelgiant į vartotojo lokalę.
• Datos ir laiko formatavimas: Būtinai naudokite tinkamas datos ir laiko formatavimo bibliotekas, kad datos ir laikai būtų rodomi vartotojo vietiniu formatu. Vartotojo lokalė, saugoma Context ar būsenoje, gali būti naudojama teisingam formatavimui nustatyti.
• Valiutos formatavimas: Panašiai, naudokite valiutos formatavimo bibliotekas, kad valiutų vertės būtų rodomos vartotojo vietine valiuta ir formatu. Vartotojo lokalė gali būti naudojama teisingai valiutai ir formatavimui nustatyti.
• Iš dešinės į kairę (RTL) išdėstymai: Jei jūsų programa turi palaikyti RTL kalbas, pavyzdžiui, arabų ar hebrajų, naudokite CSS ir JavaScript technikas, kad dinamiškai pritaikytumėte išdėstymą pagal vartotojo lokalę. Context gali būti naudojamas išdėstymo krypčiai (LTR arba RTL) saugoti ir padaryti ją prieinamą visiems komponentams.
• Vertimų valdymas: Naudokite vertimų valdymo sistemą (TMS), kad valdytumėte savo programos vertimus. Tai padės jums išlaikyti vertimus tvarkingus ir atnaujintus, taip pat palengvins naujų kalbų palaikymo pridėjimą ateityje. Integruokite savo TMS su savo būsenos valdymo strategija, kad efektyviai įkeltumėte ir atnaujintumėte vertimus.

Kalbos nustatymų valdymo su Context pavyzdys:

import React, { createContext, useContext, useState } from 'react';

const LanguageContext = createContext({
  locale: 'en',
  setLocale: () => {},
});

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const value = {
    locale,
    setLocale,
  };

  return (
    <LanguageContext.Provider value={value}>
      {children}
    </LanguageContext.Provider>
  );
}

function useLanguage() {
  return useContext(LanguageContext);
}

function MyComponent() {
  const { locale, setLocale } = useLanguage();

  return (
    <div>
      <p>Current Locale: {locale}</p>
      <button onClick={() => setLocale('en')}>English</button>
      <button onClick={() => setLocale('fr')}>French</button>
    </div>
  );
}

function App() {
  return (
    <LanguageProvider>
      <MyComponent />
    </LanguageProvider>
  );
}

Pažangios būsenos valdymo bibliotekos: daugiau nei Context

Nors React Context yra vertingas įrankis programos būsenai valdyti, sudėtingesnėms programoms dažnai naudinga naudoti specializuotas būsenos valdymo bibliotekas. Šios bibliotekos siūlo pažangesnes funkcijas, tokias kaip:

• Nuspėjami būsenos atnaujinimai: Daugelis būsenos valdymo bibliotekų taiko griežtą vienakryptį duomenų srautą, todėl lengviau suprasti, kaip būsena keičiasi laikui bėgant.
• Centralizuota būsenos saugykla: Būsena paprastai saugoma vienoje, centralizuotoje saugykloje, todėl ją lengviau pasiekti ir valdyti.
• „Time-travel“ derinimas: Kai kurios bibliotekos, pavyzdžiui, Redux, siūlo „time-travel“ derinimą, kuris leidžia žingsniuoti pirmyn ir atgal per būsenos pakeitimus, palengvinant klaidų identifikavimą ir taisymą.
• Middleware palaikymas: Middleware leidžia perimti ir modifikuoti veiksmus ar būsenos atnaujinimus, prieš juos apdorojant saugykloje. Tai gali būti naudinga registravimui, analitikai ar asinchroninėms operacijoms.

Keletas populiarių React būsenos valdymo bibliotekų:

• Redux: Nuspėjama būsenos talpykla JavaScript programoms. Redux yra brandi ir plačiai naudojama biblioteka, siūlanti tvirtą funkcijų rinkinį sudėtingai būsenai valdyti.
• Zustand: Mažas, greitas ir mastelį atitinkantis minimalistinis būsenos valdymo sprendimas, naudojantis supaprastintus flux principus. Zustand yra žinomas dėl savo paprastumo ir lengvo naudojimo.
• Recoil: Būsenos valdymo biblioteka skirta React, kuri naudoja atomus ir selektorius būsenai ir išvestiniams duomenims apibrėžti. Recoil sukurta taip, kad būtų lengva išmokti ir naudoti, ir ji pasižymi puikiu našumu.
• MobX: Paprasta, mastelį atitinkanti būsenos valdymo biblioteka, kuri palengvina sudėtingos programos būsenos valdymą. MobX naudoja stebimas duomenų struktūras, kad automatiškai sektų priklausomybes ir atnaujintų vartotojo sąsają, kai būsena pasikeičia.

Tinkamos būsenos valdymo bibliotekos pasirinkimas priklauso nuo konkrečių jūsų programos poreikių. Priimdami sprendimą, atsižvelkite į savo būsenos sudėtingumą, komandos dydį ir našumo reikalavimus.

Išvada: paprastumo ir mastelio derinimas

React Context ir Props yra abu esminiai įrankiai būsenai valdyti React programose. Props suteikia aiškų ir nedviprasmišką duomenų srautą, o Context pašalina „prop drilling“ ir supaprastina globalios būsenos valdymą. Suprasdami kiekvieno požiūrio stipriąsias ir silpnąsias puses bei laikydamiesi geriausių praktikų, galite pasirinkti tinkamą strategiją savo projektams ir kurti palaikomas, mastelį atitinkančias ir našias React programas globaliai auditorijai. Prisiminkite atsižvelgti į poveikį internacionalizacijai ir lokalizacijai priimdami būsenos valdymo sprendimus ir nedvejokite išbandyti pažangias būsenos valdymo bibliotekas, kai jūsų programa taps sudėtingesnė.