React experimental_useContextSelector: Smulkus konteksto vartojimas

React Context API suteikia galingą mechanizmą dalintis būsena ir props tarp jūsų programos be aiškaus prop drilling poreikio. Tačiau numatytasis Context API įgyvendinimas kartais gali sukelti našumo problemų, ypač didelėse ir sudėtingose programose, kur konteksto reikšmė dažnai keičiasi. Net jei komponentas priklauso tik nuo mažos konteksto dalies, bet koks konteksto reikšmės pakeitimas sukels visų tą kontekstą vartojančių komponentų atvaizdavimą iš naujo, o tai gali sukelti nereikalingus atvaizdavimus ir našumo kliūtis.

Siekdami išspręsti šį apribojimą, React pristatė experimental_useContextSelector kabliuką (šiuo metu eksperimentinis, kaip rodo pavadinimas). Šis kabliukas leidžia komponentams prenumeruoti tik tas konkrečias konteksto dalis, kurių jiems reikia, užkertant kelią atvaizdavimui iš naujo, kai keičiasi kitos konteksto dalys. Šis požiūris žymiai optimizuoja našumą, sumažindamas nereikalingų komponentų atnaujinimų skaičių.

Problemos supratimas: Klasikinis Context API ir atvaizdavimai iš naujo

Prieš pasinerdami į experimental_useContextSelector, iliustruokime galimą našumo problemą su standartiniu Context API. Apsvarstykite visuotinį vartotojo kontekstą, kuriame saugoma vartotojo informacija, nuostatos ir autentifikavimo būsena:

            
const UserContext = React.createContext({
  userInfo: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA'
  },
  preferences: {
    theme: 'light',
    language: 'en-US',
    notificationsEnabled: true
  },
  isAuthenticated: false
});

function App() {
  const [user, setUser] = React.useState({
    userInfo: {
      name: 'John Doe',
      email: 'john.doe@example.com',
      country: 'USA'
    },
    preferences: {
      theme: 'light',
      language: 'en-US',
      notificationsEnabled: true
    },
    isAuthenticated: false
  });

  const updateUser = (newUser) => {
    setUser(newUser);
  };

  return (
    
      
      
    
  );
}

function Profile() {
  const { userInfo } = React.useContext(UserContext);
  return (
    

      
{userInfo.name}
      
Email: {userInfo.email}
      
Country: {userInfo.country}
    
  );
}

function Settings() {
  const { preferences, updateUser } = React.useContext(UserContext);

  const toggleTheme = () => {
    updateUser({
      ...user,
      preferences: { ...preferences, theme: preferences.theme === 'light' ? 'dark' : 'light' },
    });
  };

  return (
    

      
Theme: {preferences.theme}
      Toggle Theme
    
  );
}

            

              
                Copy
              
            
          

Šiame scenarijuje komponentas Profile naudoja tik savybę userInfo, o komponentas Settings naudoja savybes preferences ir updateUser. Jei komponentas Settings atnaujina temą, sukeldamas preferences objekto pakeitimą, komponentas Profile taip pat bus atvaizduojamas iš naujo, net jei jis visiškai nepriklauso nuo preferences. Taip yra todėl, kad React.useContext prenumeruoja komponentą visai konteksto reikšmei. Šis nereikalingas atvaizdavimas iš naujo gali tapti reikšminga našumo kliūtimi sudėtingesnėse programose su dideliu konteksto vartotojų skaičiumi.

Pristatome experimental_useContextSelector: Selektyvus konteksto vartojimas

experimental_useContextSelector kabliukas pateikia šios problemos sprendimą, leisdamas komponentams pasirinkti tik tas konkrečias konteksto dalis, kurių jiems reikia. Šis kabliukas priima du argumentus:

• Konteksto objektą (sukurtą naudojant React.createContext).
• Selektyvo funkciją, kuri gauna visą konteksto reikšmę kaip argumentą ir grąžina konkrečią reikšmę, kurios reikia komponentui.

Komponentas bus atvaizduojamas iš naujo tik tada, kai pasirinkta reikšmė pasikeis (naudojant griežtą lygybę, ===). Tai leidžia mums optimizuoti ankstesnį pavyzdį ir užkirsti kelią nereikalingiems komponento Profile atvaizdavimams iš naujo.

Pavyzdžio perkūrimas su experimental_useContextSelector

Štai kaip galime perkurti ankstesnį pavyzdį naudodami experimental_useContextSelector:

            
import { unstable_useContextSelector as useContextSelector } from 'use-context-selector';

const UserContext = React.createContext({
  userInfo: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA'
  },
  preferences: {
    theme: 'light',
    language: 'en-US',
    notificationsEnabled: true
  },
  isAuthenticated: false
});

function App() {
  const [user, setUser] = React.useState({
    userInfo: {
      name: 'John Doe',
      email: 'john.doe@example.com',
      country: 'USA'
    },
    preferences: {
      theme: 'light',
      language: 'en-US',
      notificationsEnabled: true
    },
    isAuthenticated: false
  });

  const updateUser = (newUser) => {
    setUser(newUser);
  };

  return (
    
      
      
    
  );
}

function Profile() {
  const userInfo = useContextSelector(UserContext, (context) => context.userInfo);
  return (
    

      
{userInfo.name}
      
Email: {userInfo.email}
      
Country: {userInfo.country}
    
  );
}

function Settings() {
  const preferences = useContextSelector(UserContext, (context) => context.preferences);
  const updateUser = useContextSelector(UserContext, (context) => context.updateUser);

  const toggleTheme = () => {
    updateUser({
      ...user,
      preferences: { ...preferences, theme: preferences.theme === 'light' ? 'dark' : 'light' },
    });
  };

  return (
    

      
Theme: {preferences.theme}
      Toggle Theme
    
  );
}

            

              
                Copy
              
            
          

Šiame perkonstruotame pavyzdyje komponentas Profile dabar naudoja useContextSelector, kad pasirinktų tik savybę userInfo iš konteksto. Todėl, kai komponentas Settings atnaujina temą, komponentas Profile nebeatvaizduos iš naujo, nes savybė userInfo lieka nepakitusi. Panašiai, komponentas `Settings` pasirenka tik savybes `preferences` ir `updateUser`, kurių jam reikia, toliau optimizuodamas našumą.

Svarbi pastaba: Nepamirškite importuoti unstable_useContextSelector iš paketo use-context-selector. Kaip rodo pavadinimas, šis kabliukas vis dar yra eksperimentinis ir ateityje React versijose gali būti keičiamas. Paketas `use-context-selector` yra geras pasirinkimas pradėti, tačiau atminkite galimus būsimus API pakeitimus iš React komandos, kai funkcija taps stabili.

experimental_useContextSelector naudojimo privalumai

• Pagerintas našumas: Sumažina nereikalingus atvaizdavimus iš naujo, atnaujindamas komponentus tik tada, kai pasikeičia pasirinkta konteksto reikšmė. Tai ypač naudinga sudėtingoms programoms su dažnai besikeičiančiais konteksto duomenimis.
• Smulkus valdymas: Suteikia tikslią kontrolę, kurias konteksto dalis komponentas prenumeruoja.
• Supaprastinta komponento logika: Palengvina komponentų atnaujinimų argumentavimą, nes komponentai atvaizduojami iš naujo tik tada, kai pasikeičia jų specifinės priklausomybės.

Apsvarstymai ir geriausios praktikos

• Selektyvo funkcijos našumas: Užtikrinkite, kad jūsų selektyvo funkcijos būtų našios ir venkite sudėtingų skaičiavimų ar brangių operacijų jose. Selektyvo funkcija iškviečiama kiekvieną kartą pakeitus kontekstą, todėl optimizuoti jos našumą yra labai svarbu.
• Memoizacija: Jei jūsų selektyvo funkcija grąžina naują objektą arba masyvą kiekvieną kartą iškvietus, net jei pagrindiniai duomenys nepasikeitė, komponentas vis tiek bus atvaizduojamas iš naujo. Apsvarstykite galimybę naudoti memoizacijos metodus (pvz., React.useMemo arba bibliotekas, tokias kaip Reselect), kad užtikrintumėte, jog selektyvo funkcija grąžintų naują reikšmę tik tada, kai atitinkami duomenys iš tikrųjų pasikeitė.
• Konteksto reikšmės struktūra: Apsvarstykite galimybę struktūruoti savo konteksto reikšmę taip, kad sumažintumėte tikimybę, jog nesusiję duomenys pasikeis kartu. Pavyzdžiui, galite atskirti skirtingus savo programos būsenos aspektus į atskirus kontekstus.
• Alternatyvos: Ištirkite alternatyvius būsenos valdymo sprendimus, tokius kaip Redux, Zustand arba Jotai, jei jūsų programos sudėtingumas to reikalauja. Šios bibliotekos siūlo pažangesnių funkcijų globaliai būsenai valdyti ir našumui optimizuoti.
• Eksperimentinė būsena: Žinokite, kad experimental_useContextSelector vis dar yra eksperimentinis. API gali keistis ateityje React versijose. Paketas `use-context-selector` suteikia stabilų ir patikimą įgyvendinimą, tačiau visada stebėkite React atnaujinimus dėl galimų pagrindinio API pakeitimų.

Realūs pavyzdžiai ir naudojimo atvejai

Štai keletas realių pavyzdžių, kur experimental_useContextSelector gali būti ypač naudingas:

• Temos valdymas: Programose su tinkinamomis temomis galite naudoti experimental_useContextSelector, kad komponentai galėtų prenumeruoti tik dabartinius temos nustatymus, užkertant kelią atvaizdavimui iš naujo, kai keičiasi kiti programos nustatymai. Pavyzdžiui, apsvarstykite el. prekybos svetainę, siūlančią skirtingas spalvų temas vartotojams visame pasaulyje. Komponentai, kurie rodo tik spalvas (mygtukai, fonai ir kt.), prenumeruotų tik savybę `theme` kontekste, išvengdami nereikalingų atvaizdavimų iš naujo, kai, pavyzdžiui, pasikeičia vartotojo valiutos pasirinkimas.
• Internacionalizacija (i18n): Valdydami vertimus daugiakalbėje programoje, galite naudoti experimental_useContextSelector, kad komponentai galėtų prenumeruoti tik dabartinę lokalę arba konkrečius vertimus. Pavyzdžiui, įsivaizduokite pasaulinę socialinės žiniasklaidos platformą. Vieno įrašo vertimas (pvz., iš anglų į ispanų) neturėtų sukelti viso naujienų srauto atvaizdavimo iš naujo, jei pasikeitė tik to konkretaus įrašo vertimas. useContextSelector užtikrina, kad atnaujinamas tik atitinkamas komponentas.
• Vartotojo autentifikavimas: Programose, kurioms reikia vartotojo autentifikavimo, galite naudoti experimental_useContextSelector, kad komponentai galėtų prenumeruoti tik vartotojo autentifikavimo būseną, užkertant kelią atvaizdavimui iš naujo, kai keičiasi kita vartotojo profilio informacija. Pavyzdžiui, internetinės bankininkystės platformos sąskaitos suvestinės komponentas gali priklausyti tik nuo `userId` iš konteksto. Jei vartotojas atnaujina savo adresą savo profilio nustatymuose, sąskaitos suvestinės komponentui nereikia atvaizduoti iš naujo, todėl vartotojo patirtis tampa sklandesnė.
• Formų valdymas: Tvarkydami sudėtingas formas su keliais laukais, galite naudoti experimental_useContextSelector, kad atskiri formos laukai galėtų prenumeruoti tik savo konkrečias reikšmes, užkertant kelią atvaizdavimui iš naujo, kai keičiasi kiti laukai. Įsivaizduokite daugiapakopę vizos paraiškos formą. Kiekvienas žingsnis (vardas, adresas, paso duomenys) gali būti izoliuotas ir atvaizduojamas iš naujo tik tada, kai pasikeičia duomenys tame konkrečiame žingsnyje, o ne visa forma atvaizduojama iš naujo po kiekvieno lauko atnaujinimo.

Išvada

experimental_useContextSelector yra vertingas įrankis optimizuojant React programų, kurios naudoja Context API, našumą. Leisdamas komponentams pasirinkti tik tas konkrečias konteksto dalis, kurių jiems reikia, jis užkerta kelią nereikalingiems atvaizdavimams iš naujo ir pagerina bendrą programos reagavimą. Nors vis dar eksperimentinis, tai yra daug žadantis papildymas React ekosistemai ir vertas ištirti našumui kritinėms programoms. Visada nepamirškite kruopščiai išbandyti ir žinoti apie galimus API pakeitimus, kai kabliukas subręsta. Laikykite tai galingu jūsų React įrankių rinkinio papildymu, kai susiduriate su sudėtingu būsenos valdymu ir našumo kliūtimis, atsirandančiomis dėl dažnų konteksto atnaujinimų. Atidžiai išanalizavę savo programos konteksto naudojimą ir strategiškai pritaikę experimental_useContextSelector, galite žymiai pagerinti vartotojo patirtį ir sukurti efektyvesnes bei labiau keičiamo dydžio React programas.