React experimental_useContextSelector: Konteksto parinkimo įvaldymas optimizuotam našumui

React Context API suteikia galingą mechanizmą dalytis duomenimis tarp komponentų, rankiniu būdu neperduodant rekvizitų per kiekvieną komponentų medžio lygį. Tai neįkainojama valdant globalią būseną, temas, vartotojo autentifikavimą ir kitus visapusiškus klausimus. Tačiau naivus įgyvendinimas gali sukelti nereikalingus komponentų perkrovimus, turinčius įtakos programos našumui. Štai čia į pagalbą ateina experimental_useContextSelector – kabliukas, skirtas tiksliai sureguliuoti komponentų atnaujinimus pagal konkrečias konteksto vertes.

Selektyvių konteksto atnaujinimų poreikio supratimas

Prieš pasineriant į experimental_useContextSelector, būtina suprasti pagrindinę problemą, kurią jis sprendžia. Kai Context teikėjas atnaujina, visi to konteksto vartotojai iš naujo atvaizduojami, neatsižvelgiant į tai, ar pasikeitė konkrečios naudojamos vertės. Mažose programose tai gali būti nepastebima. Tačiau didelėse, sudėtingose programose su dažnai atnaujinamais kontekstais šie nereikalingi perkrovimai gali tapti didele našumo kliūtimi.

Apsvarstykite paprastą pavyzdį: programa su globaliu vartotojo kontekstu, kuriame yra ir vartotojo profilio duomenys (vardas, avataras, el. paštas), ir vartotojo sąsajos nuostatos (tema, kalba). Komponentas turi tik rodyti vartotojo vardą. Be selektyvių atnaujinimų, bet koks temos ar kalbos nustatymų pakeitimas sukeltų vardo rodymo komponento perkrovimą, net jei šio komponento neveikia tema ar kalba.

Pristatome experimental_useContextSelector

experimental_useContextSelector yra React kabliukas, leidžiantis komponentams prenumeruoti tik konkrečias konteksto reikšmės dalis. Jis tai pasiekia priimdamas konteksto objektą ir selektoriaus funkciją kaip argumentus. Selektoriaus funkcija gauna visą konteksto vertę ir grąžina konkrečią vertę (ar vertes), nuo kurios priklauso komponentas. Tada React atlieka negilų grąžintų reikšmių palyginimą ir tik perkrauna komponentą, jei pasirinkta vertė pasikeitė.

Svarbi pastaba: experimental_useContextSelector šiuo metu yra eksperimentinė funkcija ir gali būti pakeista būsimuose React leidimuose. Jam reikia pasirinkti lygiagretų režimą ir įgalinti eksperimentinę funkcijos vėliavėlę.

experimental_useContextSelector įgalinimas

Norėdami naudoti experimental_useContextSelector, turite:

1. Įsitikinkite, kad naudojate React versiją, kuri palaiko lygiagretų režimą (React 18 arba naujesnę).
2. Įgalinkite lygiagretų režimą ir eksperimentinę konteksto selektoriaus funkciją. Paprastai tai apima paketų rinktuvo (pvz., Webpack, Parcel) konfigūravimą ir galimą funkcijos vėliavėlės nustatymą. Naujausių instrukcijų ieškokite oficialioje React dokumentacijoje.

Pagrindinis experimental_useContextSelector naudojimas

Iliustruokime naudojimą kodo pavyzdžiu. Tarkime, kad turime UserContext, kuris teikia vartotojo informaciją ir nuostatas:

// UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext({
  user: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    avatar: '/path/to/avatar.jpg',
  },
  preferences: {
    theme: 'light',
    language: 'en',
  },
  updateTheme: () => {},
  updateLanguage: () => {},
});

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    avatar: '/path/to/avatar.jpg',
  });
  const [preferences, setPreferences] = useState({
    theme: 'light',
    language: 'en',
  });

  const updateTheme = (newTheme) => {
    setPreferences({...preferences, theme: newTheme});
  };

  const updateLanguage = (newLanguage) => {
    setPreferences({...preferences, language: newLanguage});
  };

  return (
    
      {children}
    
  );
};

const useUser = () => useContext(UserContext);

export { UserContext, UserProvider, useUser };

Dabar sukurkime komponentą, kuris rodo tik vartotojo vardą naudodamas experimental_useContextSelector:

// UserName.js
import React from 'react';
import { UserContext } from './UserContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const UserName = () => {
  const userName = useContextSelector(UserContext, (context) => context.user.name);

  console.log('UserName component rendered!');
  return 
Name: {userName}
;
};

export default UserName;

Šiame pavyzdyje selektoriaus funkcija (context) => context.user.name išskiria tik vartotojo vardą iš UserContext. Komponentas UserName bus perkraunamas tik tada, kai pasikeis vartotojo vardas, net jei bus atnaujintos kitos UserContext ypatybės, pvz., tema arba kalba.

Nauda naudojant experimental_useContextSelector

• Patobulintas našumas: sumažina nereikalingus komponentų perkrovimus, todėl pagerėja programos našumas, ypač sudėtingose programose su dažnai atnaujinamais kontekstais.
• Smulkus valdymas: suteikia detalų valdymą, kurios konteksto vertės suaktyvina komponentų atnaujinimus.
• Supaprastintas optimizavimas: siūlo paprastesnį konteksto optimizavimo būdą, palyginti su rankinio įsiminimo metodais.
• Patobulintas prižiūrimumas: gali pagerinti kodo įskaitomumą ir prižiūrimumą aiškiai deklaruojant konteksto vertes, nuo kurių priklauso komponentas.

Kada naudoti experimental_useContextSelector

experimental_useContextSelector yra naudingiausias šiais atvejais:

• Didelės, sudėtingos programos: kai dirbama su daugybe komponentų ir dažnai atnaujinamais kontekstais.
• Našumo kliūtys: kai profiliavimas atskleidžia, kad nereikalingi su kontekstu susiję perkrovimai daro įtaką našumui.
• Sudėtingos konteksto vertės: kai kontekste yra daug ypatybių, o komponentams reikia tik jų pogrupio.

Kada vengti experimental_useContextSelector

Nors experimental_useContextSelector gali būti labai veiksmingas, jis nėra panacėja ir turėtų būti naudojamas apdairiai. Apsvarstykite šias situacijas, kai tai gali būti ne geriausias pasirinkimas:

• Paprastos programos: mažoms programoms su keliais komponentais ir nedažnais konteksto atnaujinimais, experimental_useContextSelector naudojimo išlaidos gali viršyti naudą.
• Komponentai, kurie priklauso nuo daugelio konteksto verčių: jei komponentas priklauso nuo didelės konteksto dalies, kiekvienos vertės pasirinkimas atskirai gali neduoti didelio našumo.
• Dažni pasirinktų verčių atnaujinimai: jei pasirinktos konteksto vertės dažnai keičiasi, komponentas vis tiek dažnai perkraunamas, panaikinant našumo naudą.
• Pradinio kūrimo metu: pirmiausia sutelkite dėmesį į pagrindinę funkciją. Optimizuokite naudodami experimental_useContextSelector vėliau, kai reikia, remdamiesi našumo profiliavimu. Priešlaikinis optimizavimas gali būti žalingas.

Išplėstinis naudojimas ir svarstymai

1. Nekintamumas yra raktas

experimental_useContextSelector remiasi negiliais lygumo patikrinimais (Object.is), kad nustatytų, ar pasirinkta konteksto vertė pasikeitė. Todėl labai svarbu užtikrinti, kad konteksto vertės būtų nekintamos. Tiesioginis konteksto vertės keitimas nesukels perkrovimo, net jei pasikeitė pagrindiniai duomenys. Visada kurkite naujus objektus arba masyvus atnaujindami konteksto vertes.

Pavyzdžiui, vietoj:

context.user.name = 'Jane Doe'; // Neteisinga – keičia objektą

Naudoti:

setUser({...user, name: 'Jane Doe'}); // Teisingai – sukuria naują objektą

2. Selektorių įsiminimas

Nors experimental_useContextSelector padeda išvengti nereikalingų komponentų perkrovimų, vis tiek svarbu optimizuoti pačią selektoriaus funkciją. Jei selektoriaus funkcija atlieka brangius skaičiavimus arba kiekvieną kartą atvaizduojant sukuria naujus objektus, ji gali panaikinti selektyvių atnaujinimų našumo naudą. Naudokite useCallback arba kitus įsiminimo metodus, kad selektoriaus funkcija būtų iš naujo sukuriama tik tada, kai reikia.

import React, { useCallback } from 'react';
import { UserContext } from './UserContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const UserName = () => {
  const selectUserName = useCallback((context) => context.user.name, []);
  const userName = useContextSelector(UserContext, selectUserName);

  return 
Name: {userName}
;
};

export default UserName;

Šiame pavyzdyje useCallback užtikrina, kad selectUserName funkcija būtų iš naujo sukurta tik vieną kartą, kai komponentas iš pradžių prijungiamas. Tai apsaugo nuo nereikalingų skaičiavimų ir pagerina našumą.

3. Naudojimas su trečiųjų šalių būsenos valdymo bibliotekomis

experimental_useContextSelector gali būti naudojamas kartu su trečiųjų šalių būsenos valdymo bibliotekomis, tokiomis kaip Redux, Zustand arba Jotai, su sąlyga, kad šios bibliotekos atskleidžia savo būseną per React Context. Konkretus įgyvendinimas skirsis priklausomai nuo bibliotekos, tačiau pagrindinis principas išlieka tas pats: naudokite experimental_useContextSelector, kad pasirinktumėte tik būtinas būsenos dalis iš konteksto.

Pavyzdžiui, jei naudojate Redux su React Redux useContext kabliuku, galite naudoti experimental_useContextSelector, kad pasirinktumėte konkrečius Redux saugyklos būsenos segmentus.

4. Našumo profiliavimas

Prieš įgyvendindami experimental_useContextSelector ir po jo, labai svarbu profilizuoti programos našumą, kad patikrintumėte, ar ji iš tikrųjų teikia naudą. Naudokite React profiliavimo įrankį arba kitus našumo stebėjimo įrankius, kad nustatytumėte sritis, kuriose su kontekstu susiję perkrovimai sukelia kliūtis. Atidžiai išanalizuokite profiliavimo duomenis, kad nustatytumėte, ar experimental_useContextSelector veiksmingai sumažina nereikalingus perkrovimus.

Tarptautiniai svarstymai ir pavyzdžiai

Dirbant su internacionalizuotomis programomis, kontekstas dažnai atlieka lemiamą vaidmenį valdant lokalizavimo duomenis, tokius kaip kalbos nustatymai, valiutos formatai ir datos/laiko formatai. experimental_useContextSelector gali būti ypač naudingas šiais atvejais, siekiant optimizuoti komponentų, kurie rodo lokalizuotus duomenis, našumą.

1 pavyzdys: kalbos pasirinkimas

Apsvarstykite programą, kuri palaiko kelias kalbas. Dabartinė kalba saugoma LanguageContext. Komponentas, kuris rodo lokalizuotą sveikinimo pranešimą, gali naudoti experimental_useContextSelector, kad iš naujo atvaizduotų tik pasikeitus kalbai, o ne atvaizduotų iš naujo, kai atnaujinama bet kuri kita konteksto vertė.

// LanguageContext.js
import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext({
  language: 'en',
  translations: {
    en: {
      greeting: 'Hello, world!',
    },
    fr: {
      greeting: 'Bonjour, le monde!',
    },
    es: {
      greeting: '¡Hola, mundo!',
    },
  },
  setLanguage: () => {},
});

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

  const changeLanguage = (newLanguage) => {
    setLanguage(newLanguage);
  };

  const translations = LanguageContext.translations;

  return (
    
      {children}
    
  );
};

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

export { LanguageContext, LanguageProvider, useLanguage };

// Greeting.js
import React from 'react';
import { LanguageContext } from './LanguageContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const Greeting = () => {
  const languageContext = useContextSelector(LanguageContext, (context) => {
    return {
        language: context.language,
        translations: context.translations
    }
  });

  const greeting = languageContext.translations[languageContext.language].greeting;
  return 
{greeting}
;
};

export default Greeting;

2 pavyzdys: valiutos formatavimas

El. komercijos programa gali saugoti vartotojo pageidaujamą valiutą CurrencyContext. Komponentas, kuris rodo produktų kainas, gali naudoti experimental_useContextSelector, kad iš naujo atvaizduotų tik pasikeitus valiutai, užtikrinant, kad kainos visada būtų rodomos teisingu formatu.

3 pavyzdys: laiko juostos tvarkymas

Programa, kuri rodo įvykių laiką vartotojams skirtingose laiko juostose, gali naudoti TimeZoneContext, kad saugotų vartotojo pageidaujamą laiko juostą. Komponentai, kurie rodo įvykių laiką, gali naudoti experimental_useContextSelector, kad iš naujo atvaizduotų tik pasikeitus laiko juostai, užtikrinant, kad laikas visada būtų rodomas vartotojo vietos laiku.

experimental_useContextSelector apribojimai

• Eksperimentinė būsena: Kadangi tai yra eksperimentinė funkcija, jos API arba veikimas gali pasikeisti būsimuose React leidimuose.
• Negilus lygumas: remiasi negiliais lygumo patikrinimais, kurie gali būti nepakankami sudėtingiems objektams ar masyvams. Kai kuriais atvejais gali prireikti gilių palyginimų, tačiau juos reikia naudoti saikingai dėl poveikio našumui.
• Potencialus per didelis optimizavimas: per didelis experimental_useContextSelector naudojimas gali padidinti nereikalingą kodo sudėtingumą. Svarbu atidžiai apsvarstyti, ar našumo prieaugis pateisina papildomą sudėtingumą.
• Derinimo sudėtingumas: derinimo problemos, susijusios su selektyviais konteksto atnaujinimais, gali būti sudėtingos, ypač dirbant su sudėtingomis konteksto vertėmis ir selektoriaus funkcijomis.

Alternatyvos experimental_useContextSelector

Jei experimental_useContextSelector netinka jūsų naudojimo atvejui, apsvarstykite šias alternatyvas:

• useMemo: įsiminkite komponentą, kuris naudoja kontekstą. Tai apsaugo nuo perkrovimų, jei komponentui perduoti rekvizitai nepasikeitė. Tai yra mažiau detalus nei experimental_useContextSelector, bet gali būti paprastesnis kai kuriais naudojimo atvejais.
• React.memo: aukštesnio lygio komponentas, kuris įsimena funkcinį komponentą pagal jo rekvizitus. Panašus į useMemo, bet taikomas visam komponentui.
• Redux (arba panašios būsenos valdymo bibliotekos): jei jau naudojate Redux arba panašią biblioteką, pasinaudokite jos selektoriaus galimybėmis, kad pasirinktumėte tik reikiamus duomenis iš saugyklos.
• Konteksto padalijimas: jei kontekste yra daug nesusijusių verčių, apsvarstykite galimybę padalyti jį į kelis mažesnius kontekstus. Tai sumažina perkrovimų apimtį, kai keičiasi atskiros vertės.

Išvada

experimental_useContextSelector yra galingas įrankis optimizuojant React programas, kurios labai priklauso nuo Context API. Leidžiant komponentams prenumeruoti tik konkrečias konteksto reikšmės dalis, jis gali žymiai sumažinti nereikalingus perkrovimus ir pagerinti našumą. Tačiau svarbu jį naudoti apdairiai ir atidžiai apsvarstyti jo apribojimus ir alternatyvas. Nepamirškite profilizuoti savo programos našumą, kad patikrintumėte, ar experimental_useContextSelector iš tikrųjų teikia naudą, ir įsitikinkite, kad neperoptimizuojate.

Prieš integruodami experimental_useContextSelector į gamybą, kruopščiai patikrinkite jo suderinamumą su esama kodo baze ir žinokite apie galimus būsimus API pakeitimus dėl jo eksperimentinio pobūdžio. Atidžiai planuojant ir įgyvendinant, experimental_useContextSelector gali būti vertingas turtas kuriant didelio našumo React programas pasaulinei auditorijai.

Papildomi ištekliai

• React oficiali dokumentacija
• React GitHub saugykla
• React useContext kabliuko dokumentacija