React Context API: būsenos paskirstymo optimizavimas globalioms programoms

React Context API yra galingas įrankis programos būsenai valdyti, ypač didelėse ir sudėtingose globaliose programose. Jis suteikia būdą dalytis duomenimis tarp komponentų, nereikalaujant rankiniu būdu perduoti savybių („props“) kiekviename lygyje (tai vadinama „prop drilling“). Šiame straipsnyje gilinsimės į React Context API, nagrinėsime jo privalumus, demonstruosime naudojimą ir aptarsime optimizavimo metodus, siekiant užtikrinti našumą globaliai paskirstytose programose.

Problemos supratimas: „Prop Drilling“

„Prop drilling“ atsiranda, kai reikia perduoti duomenis iš tėvinio komponento į giliai įdėtą vaikinį komponentą. Dėl to tarpiniai komponentai dažnai gauna savybes, kurių patys nenaudoja, o tik perduoda jas žemyn komponentų medyje. Tokia praktika gali lemti:

• Sunkiai prižiūrimas kodas: Duomenų struktūros pakeitimai reikalauja modifikacijų keliuose komponentuose.
• Sumažėjęs pakartotinis panaudojamumas: Komponentai tampa glaudžiai susiję dėl savybių priklausomybių.
• Padidėjęs sudėtingumas: Komponentų medį tampa sunkiau suprasti ir derinti.

Apsvarstykite scenarijų, kai turite globalią programą, leidžiančią vartotojams pasirinkti norimą kalbą ir temą. Be Context API, šiuos nustatymus tektų perduoti per kelis komponentus, net jei prieiga prie jų reikalinga tik keliems iš jų.

Sprendimas: React Context API

React Context API suteikia būdą dalytis reikšmėmis, pavyzdžiui, programos nustatymais, tarp komponentų, aiškiai neperduodant savybės per kiekvieną medžio lygį. Jį sudaro trys pagrindinės dalys:

• Kontekstas (Context): Sukuriamas naudojant `React.createContext()`. Jame saugomi duomenys, kuriais bus dalijamasi.
• Tiekėjas (Provider): Komponentas, kuris suteikia konteksto reikšmę savo vaikiniams komponentams.
• Vartotojas (Consumer) (arba `useContext` Hook): Komponentas, kuris prenumeruoja konteksto reikšmę ir persirenderina, kai tik reikšmė pasikeičia.

Konteksto kūrimas

Pirmiausia, sukuriate kontekstą naudodami `React.createContext()`. Galite pasirinktinai nurodyti numatytąją reikšmę, kuri naudojama, jei komponentas bando naudoti kontekstą ne Tiekėjo (Provider) viduje.

            
import React from 'react';

const ThemeContext = React.createContext({ theme: 'light', toggleTheme: () => {} });

export default ThemeContext;

            

              
                Copy
              
            
          

Konteksto reikšmės teikimas

Toliau, apgaubiate savo komponentų medžio dalį, kuriai reikia prieigos prie konteksto reikšmės, `Provider` komponentu. `Provider` priima `value` savybę, kuri yra duomenys, kuriais norite dalytis.

            
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const themeValue = { theme, toggleTheme };

  return (
    
      {/* Your application components here */}
    
  );
}

export default App;

            

              
                Copy
              
            
          

Konteksto reikšmės naudojimas

Galiausiai, savo komponentuose naudojate konteksto reikšmę naudodami arba `Consumer` komponentą, arba (rekomenduojama) `useContext` „hook'ą“. `useContext` „hook'as“ yra švaresnis ir glaustesnis.

            
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Toggle Theme
    
  );
}

export default ThemedButton;

            

              
                Copy
              
            
          

Context API naudojimo privalumai

• Panaikina „Prop Drilling“: Supaprastina komponentų struktūrą ir sumažina kodo sudėtingumą.
• Pagerintas kodo pakartotinis panaudojamumas: Komponentai tampa mažiau priklausomi nuo savo tėvinių komponentų.
• Centralizuotas būsenos valdymas: Palengvina visos programos būsenos valdymą ir atnaujinimą.
• Geresnis skaitomumas: Pagerina kodo aiškumą ir priežiūrą.

Context API našumo optimizavimas globalioms programoms

Nors Context API yra galingas, svarbu jį naudoti išmintingai, kad išvengtumėte našumo problemų, ypač globaliose programose, kur duomenų atnaujinimai gali sukelti persirenderinimus daugelyje komponentų. Štai keletas optimizavimo metodų:

1. Konteksto detalumas (Granularity)

Venkite kurti vieną, didelį kontekstą visai savo programai. Vietoj to, suskaidykite savo būseną į mažesnius, konkretesnius kontekstus. Tai sumažina komponentų, kurie persirenderina pasikeitus vienai konteksto reikšmei, skaičių. Pavyzdžiui, atskiri kontekstai skirti:

• Vartotojo autentifikacijai
• Temos nustatymams
• Kalbos nustatymams
• Globaliai konfigūracijai

Naudojant mažesnius kontekstus, persirenderins tik tie komponentai, kurie priklauso nuo konkrečios būsenos dalies, kai ta būsena pasikeičia.

2. Memoizacija su `React.memo`

`React.memo` yra aukštesnės eilės komponentas, kuris memoizuoja funkcinį komponentą. Jis apsaugo nuo persirenderinimo, jei savybės („props“) nepasikeitė. Naudojant Context API, kontekstą naudojantys komponentai gali persirenderinti be reikalo, net jei naudojama reikšmė tam konkrečiam komponentui reikšmingai nepasikeitė. Konteksto vartotojų apgaubimas `React.memo` gali padėti.

            
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const ThemedButton = React.memo(() => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  console.log('ThemedButton rendered'); // Check when it re-renders

  return (
    
      Toggle Theme
    
  );
});

export default ThemedButton;

            

              
                Copy
              
            
          

Pastaba: `React.memo` atlieka paviršutinišką savybių palyginimą. Jei jūsų konteksto reikšmė yra objektas ir jūs jį keičiate tiesiogiai (pvz., `context.value.property = newValue`), `React.memo` neaptiks pakeitimo. Norėdami to išvengti, atnaujindami konteksto reikšmes visada kurkite naujus objektus.

3. Atrankiniai konteksto reikšmių atnaujinimai

Vietoj to, kad pateiktumėte visą būsenos objektą kaip konteksto reikšmę, pateikite tik tas konkrečias reikšmes, kurių reikia kiekvienam komponentui. Tai sumažina nereikalingų persirenderinimų tikimybę. Pavyzdžiui, jei komponentui reikia tik `theme` reikšmės, nepateikite viso `themeValue` objekto.

            
// Instead of this:
const themeValue = { theme, toggleTheme };

  {/* ... */}


// Do this:

  {/* ... */}


            

              
                Copy
              
            
          

Komponentas, naudojantis tik `theme`, turėtų būti pritaikytas tikėtis tik `theme` reikšmės iš konteksto.

4. Individualūs „hook'ai“ konteksto naudojimui

Sukurkite individualius „hook'us“, kurie apgaubia `useContext` „hook'ą“ ir grąžina tik tas konkrečias reikšmes, kurių reikia komponentui. Tai suteikia detalesnę kontrolę, kurie komponentai persirenderina, kai pasikeičia konteksto reikšmė. Tai sujungia detalaus konteksto ir atrankinių reikšmių atnaujinimo privalumus.

            
import { useContext } from 'react';
import ThemeContext from './ThemeContext';

function useTheme() {
  return useContext(ThemeContext).theme;
}

function useToggleTheme() {
  return useContext(ThemeContext).toggleTheme;
}

export { useTheme, useToggleTheme };

            

              
                Copy
              
            
          

Dabar komponentai gali naudoti šiuos individualius „hook'us“, kad pasiektų tik tas konkrečias konteksto reikšmes, kurių jiems reikia.

            
import React from 'react';
import { useTheme, useToggleTheme } from './useTheme';

function ThemedButton() {
  const theme = useTheme();
  const toggleTheme = useToggleTheme();

  console.log('ThemedButton rendered'); // Check when it re-renders

  return (
    
      Toggle Theme
    
  );
}

export default ThemedButton;

            

              
                Copy
              
            
          

5. Nekintamumas (Immutability)

Užtikrinkite, kad jūsų konteksto reikšmės būtų nekintamos. Tai reiškia, kad vietoj esamo objekto keitimo, visada turėtumėte sukurti naują objektą su atnaujintomis reikšmėmis. Tai leidžia React efektyviai aptikti pakeitimus ir sukelti persirenderinimus tik tada, kai tai būtina. Tai ypač svarbu derinant su `React.memo`. Naudokite bibliotekas, tokias kaip Immutable.js ar Immer, kad padėtumėte užtikrinti nekintamumą.

            
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import { useImmer } from 'use-immer'; // Or similar library

function App() {
  // const [theme, setTheme] = useState({ mode: 'light', primaryColor: '#fff' }); // BAD - mutating object

  const [theme, setTheme] = useImmer({ mode: 'light', primaryColor: '#fff' }); // BETTER - using Immer for immutable updates

  const toggleTheme = () => {
    // setTheme(prevTheme => {  // DON'T mutate the object directly!
    //  prevTheme.mode = prevTheme.mode === 'light' ? 'dark' : 'light';
    //  return prevTheme; // This won't trigger a re-render reliably
    // });

    setTheme(draft => {
      draft.mode = draft.mode === 'light' ? 'dark' : 'light'; // Immer handles immutability
    });

    //setTheme(prevTheme => ({ ...prevTheme, mode: prevTheme.mode === 'light' ? 'dark' : 'light' })); // Good, create a new object

  };

  return (
    
      {/* Your application components here */}
    
  );
}

            

              
                Copy
              
            
          

6. Venkite dažno konteksto atnaujinimo

Jei įmanoma, venkite per dažno konteksto reikšmės atnaujinimo. Dažni atnaujinimai gali sukelti nereikalingus persirenderinimus ir pabloginti našumą. Apsvarstykite galimybę sugrupuoti atnaujinimus arba naudoti „debouncing“/„throttling“ metodus, kad sumažintumėte atnaujinimų dažnį, ypač tokiems įvykiams kaip lango dydžio keitimas ar slinkimas.

7. `useReducer` naudojimas sudėtingai būsenai

Jei jūsų kontekstas valdo sudėtingą būsenos logiką, apsvarstykite galimybę naudoti `useReducer` būsenos perėjimams valdyti. Tai gali padėti išlaikyti jūsų kodą organizuotą ir išvengti nereikalingų persirenderinimų. `useReducer` leidžia apibrėžti reduktoriaus funkciją, kuri tvarko būsenos atnaujinimus pagal veiksmus, panašiai kaip Redux.

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

const initialState = { theme: 'light' };

const ThemeContext = createContext(initialState);

const reducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

const ThemeProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    
      {children}
    
  );
};

export { ThemeContext, ThemeProvider };

            

              
                Copy
              
            
          

8. Kodo skaidymas (Code Splitting)

Naudokite kodo skaidymą, kad sumažintumėte pradinį programos įkėlimo laiką. Tai gali būti ypač svarbu globalioms programoms, kurios turi palaikyti vartotojus skirtinguose regionuose su skirtingu tinklo greičiu. Kodo skaidymas leidžia įkelti tik tą kodą, kuris būtinas dabartiniam vaizdui, ir atidėti likusio kodo įkėlimą, kol jo prireiks.

9. Pateikimas serveryje (Server-Side Rendering - SSR)

Apsvarstykite galimybę naudoti pateikimą serveryje (SSR), kad pagerintumėte pradinį įkėlimo laiką ir savo programos SEO. SSR leidžia sugeneruoti pradinį HTML serveryje, kurį galima greičiau nusiųsti klientui, nei generuojant jį kliento pusėje. Tai gali būti ypač svarbu vartotojams su lėtu interneto ryšiu.

10. Lokalizacija (i18n) ir internacionalizacija

Tikrai globalioms programoms labai svarbu įdiegti lokalizaciją (i18n) ir internacionalizaciją. Context API galima efektyviai panaudoti vartotojo pasirinktai kalbai ar lokalei valdyti. Specialus kalbos kontekstas gali suteikti dabartinę kalbą, vertimus ir funkciją kalbai pakeisti.

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

const LanguageContext = createContext({ language: 'en', setLanguage: () => {} });

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const value = { language, setLanguage };

  return (
    
      {children}
    
  );
};

const useLanguage = () => useContext(LanguageContext);

export { LanguageContext, LanguageProvider, useLanguage };

            

              
                Copy
              
            
          

Tai leidžia dinamiškai atnaujinti vartotojo sąsają atsižvelgiant į vartotojo kalbos pasirinkimą, užtikrinant sklandžią patirtį vartotojams visame pasaulyje.

Context API alternatyvos

Nors Context API yra vertingas įrankis, tai ne visada geriausias sprendimas kiekvienai būsenos valdymo problemai. Štai keletas alternatyvų, kurias verta apsvarstyti:

• Redux: Išsamesnė būsenos valdymo biblioteka, tinkama didesnėms ir sudėtingesnėms programoms.
• Zustand: Mažas, greitas ir mastelį keičiantis minimalistinis būsenos valdymo sprendimas, naudojantis supaprastintus flux principus.
• MobX: Kita būsenos valdymo biblioteka, kuri naudoja stebimus duomenis (observable data) automatiniam vartotojo sąsajos atnaujinimui.
• Recoil: Eksperimentinė būsenos valdymo biblioteka iš Facebook, kuri naudoja atomus ir selektorius būsenai valdyti.
• Jotai: Primityvus ir lankstus būsenos valdymas React sistemai su atominiu modeliu.

Būsenos valdymo sprendimo pasirinkimas priklauso nuo konkrečių jūsų programos poreikių. Atsižvelkite į tokius veiksnius kaip programos dydis ir sudėtingumas, našumo reikalavimai ir komandos susipažinimas su skirtingomis bibliotekomis.

Išvada

React Context API yra galingas įrankis programos būsenai valdyti, ypač globaliose programose. Suprasdami jo privalumus, teisingai jį įgyvendindami ir naudodami šiame straipsnyje aprašytus optimizavimo metodus, galite kurti mastelį keičiančias, našias ir lengvai prižiūrimas React programas, kurios suteikia puikią vartotojo patirtį vartotojams visame pasaulyje. Nepamirškite atsižvelgti į konteksto detalumą, memoizaciją, atrankinius reikšmių atnaujinimus, nekintamumą ir kitas optimizavimo strategijas, kad užtikrintumėte, jog jūsų programa veiktų gerai net esant daţniems būsenos atnaujinimams ir dideliam komponentų skaičiui. Pasirinkite tinkamą įrankį darbui ir nebijokite ieškoti alternatyvių būsenos valdymo sprendimų, jei Context API neatitinka jūsų poreikių.