React useSyncExternalStore: Īpašas ārējo krātuvju sinhronizācijas apgūšana

Mūsdienu React lietojumprogrammās efektīva stāvokļa pārvaldība ir ļoti svarīga. Lai gan React nodrošina iebūvētus stāvokļa pārvaldības risinājumus, piemēram, useState un useReducer, integrācija ar ārējiem datu avotiem vai trešo pušu stāvokļa pārvaldības bibliotēkiem prasa sarežģītāku pieeju. Šeit noder useSyncExternalStore.

Kas ir useSyncExternalStore?

useSyncExternalStore ir React āķis, kas ieviests React 18, kas ļauj abonēt un lasīt datus no ārējiem datu avotiem veidā, kas ir saderīgs ar vienlaicīgu renderēšanu. Tas ir īpaši svarīgi, strādājot ar datiem, kurus tieši nepārvalda React, piemēram:

• Trešo pušu stāvokļa pārvaldības bibliotēkas: Redux, Zustand, Jotai utt.
• Pārlūkprogrammas API: localStorage, IndexedDB utt.
• Ārējie datu avoti: Servera sūtītie notikumi, WebSockets utt.

Pirms useSyncExternalStore, ārējo krātuvju sinhronizācija varētu izraisīt plīsumus un neatbilstības, īpaši ar React vienlaicīgās renderēšanas funkcijām. Šis āķis risina šos jautājumus, nodrošinot standartizētu un efektīvu veidu, kā savienot ārējos datus ar jūsu React komponentiem.

Kāpēc lietot useSyncExternalStore? Priekšrocības un ieguvumi

Lietojot useSyncExternalStore, ir vairākas galvenās priekšrocības:

• Vienlaicīguma drošība: Nodrošina, ka jūsu komponents vienmēr rāda konsekventu ārējās krātuves skatu pat vienlaicīgas renderēšanas laikā. Tas novērš plīsumu problēmas, kurās jūsu lietotāja saskarnes daļas varētu rādīt neatbilstošus datus.
• Veiktspēja: Optimizēts veiktspējai, samazinot nevajadzīgus atkārtotus renderējumus. Tas izmanto React iekšējos mehānismus, lai efektīvi abonētu izmaiņas un atjauninātu komponentu tikai tad, kad tas ir nepieciešams.
• Standartizēts API: Nodrošina konsekventu un paredzamu API mijiedarbībai ar ārējām krātuvēm neatkarīgi no pamatā esošās ieviešanas.
• Samazināts Boilerplate: Vienkāršo savienošanas procesu ar ārējām krātuvēm, samazinot pielāgotā koda daudzumu, kas jums jāraksta.
• Saderība: Nevainojami darbojas ar plašu ārējo datu avotu un stāvokļa pārvaldības bibliotēku klāstu.

Kā useSyncExternalStore darbojas: dziļa izpēte

useSyncExternalStore āķis pieņem trīs argumentus:

1. subscribe(callback: () => void): () => void: Funkcija, kas reģistrē atzvanīšanu, lai saņemtu paziņojumu, kad ārējā krātuve mainās. Tam jāatgriež funkcija, lai atceltu abonēšanu. Tas ir veids, kā React uzzina, kad krātuvē ir jauni dati.
2. getSnapshot(): T: Funkcija, kas atgriež datu momentuzņēmumu no ārējās krātuves. Šim momentuzņēmumam jābūt vienkāršai, nemainīgai vērtībai, ko React var izmantot, lai noteiktu, vai dati ir mainījušies.
3. getServerSnapshot?(): T (Pēc izvēles): Funkcija, kas atgriež sākotnējo datu momentuzņēmumu serverī. To izmanto servera puses renderēšanai (SSR), lai nodrošinātu konsekvenci starp serveri un klientu. Ja tas nav norādīts, React izmantos getSnapshot() servera renderēšanas laikā, kas var nebūt ideāli visiem scenārijiem.

Šeit ir šo argumentu sadalījums:

1. Kad komponents tiek montēts, useSyncExternalStore izsauc funkciju subscribe, lai reģistrētu atzvanīšanu.
2. Kad ārējā krātuve mainās, tā izsauc atzvanīšanu, kas reģistrēta, izmantojot subscribe.
3. Atzvanīšana paziņo React, ka komponents ir jāatjauno.
4. Renderēšanas laikā useSyncExternalStore izsauc getSnapshot, lai iegūtu jaunākos datus no ārējās krātuves.
5. React salīdzina pašreizējo momentuzņēmumu ar iepriekšējo momentuzņēmumu. Ja tie atšķiras, komponents tiek atjaunināts ar jauniem datiem.
6. Kad komponents tiek atmontēts, tiek izsaukta funkcija atcelt abonēšanu, ko atgriež subscribe, lai novērstu atmiņas noplūdes.

Pamata ieviešanas piemērs: integrācija ar localStorage

Paskaidrosim, kā lietot useSyncExternalStore ar vienkāršu piemēru: vērtības lasīšana un rakstīšana localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Handle potential errors like `localStorage` being unavailable.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Or a default value if appropriate for your SSR setup

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Dispatch a storage event on the current window to trigger updates in other tabs.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Sveiki, {name || 'Pasauli'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Paskaidrojums:

• getLocalStorageItem: palīdzības funkcija, lai droši izgūtu vērtību no localStorage, apstrādājot iespējamās kļūdas.
• useLocalStorage: pielāgots āķis, kas ietver loģiku mijiedarbībai ar localStorage, izmantojot useSyncExternalStore.
• subscribe: klausās notikumam 'storage', kas tiek aktivizēts, kad localStorage tiek modificēts citā cilnē vai logā. Svarīgi, ka mēs izsūtam glabāšanas notikumu pēc jaunas vērtības iestatīšanas, lai pareizi aktivizētu atjauninājumus *tajā pašā* logā.
• getSnapshot: atgriež pašreizējo vērtību no localStorage.
• serverSnapshot: atgriež null (vai noklusējuma vērtību) servera puses renderēšanai.
• setValue: atjaunina vērtību localStorage un izsūta glabāšanas notikumu, lai signalizētu citām cilnēm.
• MyComponent: vienkāršs komponents, kas izmanto useLocalStorage āķi, lai parādītu un atjauninātu vārdu.

Svarīgi apsvērumi localStorage:

• Kļūdu apstrāde: Vienmēr ietiniet localStorage piekļuvi blokos try...catch, lai apstrādātu iespējamās kļūdas, piemēram, kad localStorage ir atspējots vai nav pieejams (piemēram, privātās pārlūkošanas režīmā).
• Glabāšanas notikumi: Notikums 'storage' tiek aktivizēts tikai tad, kad localStorage tiek modificēts *citā* cilnē vai logā, nevis tajā pašā logā. Tāpēc mēs manuāli izsūtam jaunu StorageEvent pēc vērtības iestatīšanas.
• Datu serializācija: localStorage saglabā tikai virknes. Jums, iespējams, būs nepieciešams serializēt un deserializēt sarežģītas datu struktūras, izmantojot JSON.stringify un JSON.parse.
• Drošība: Atcerieties par datiem, kurus glabājat localStorage, jo tiem var piekļūt JavaScript kods tajā pašā domēnā. Sensitīvu informāciju nevajadzētu glabāt localStorage.

Papildu lietošanas gadījumi un piemēri

1. Integrācija ar Zustand (vai citu stāvokļa pārvaldības bibliotēku)

useSyncExternalStore integrācija ar globālo stāvokļa pārvaldības bibliotēku, piemēram, Zustand, ir izplatīts lietošanas gadījums. Šeit ir piemērs:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({ 
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Server snapshot, provide default state
  ).bears
  return <h1>{bears} bears around here!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>one bear</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Paskaidrojums:

• Mēs izmantojam Zustand globālajai stāvokļa pārvaldībai
• useStore.subscribe: šī funkcija abonē Zustand krātuvi un aktivizēs atkārtotu renderēšanu, kad krātuves stāvoklis mainīsies.
• useStore.getState: šī funkcija atgriež pašreizējo Zustand krātuves stāvokli.
• Trešais parametrs nodrošina noklusējuma stāvokli servera puses renderēšanai (SSR), nodrošinot, ka komponents pareizi renderējas serverī, pirms klientu puses JavaScript pārņem.
• Komponents iegūst lāču skaitu, izmantojot useSyncExternalStore, un renderē to.
• Komponents Controls parāda, kā lietot Zustand iestatītāju.

2. Integrācija ar servera sūtītiem notikumiem (SSE)

useSyncExternalStore var izmantot, lai efektīvi atjauninātu komponentus, pamatojoties uz reāllaika datiem no servera, izmantojot servera sūtītos notikumus (SSE).

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState<any>(null);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Replace with your SSE endpoint

  if (!realTimeData) {
    return <p>Loading...</p>;
  }

  return <div><p>Real-time Data: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Paskaidrojums:

• useSSE: pielāgots āķis, kas izveido SSE savienojumu ar doto URL.
• subscribe: pievieno notikumu klausītāju objektam EventSource, lai saņemtu paziņojumus par jauniem ziņojumiem no servera. Tajā tiek izmantots useCallback, lai nodrošinātu, ka atzvanīšanas funkcija netiek atkārtoti izveidota katrā renderēšanā.
• getSnapshot: atgriež pēdējo saņemto informāciju no SSE straumes.
• serverSnapshot: atgriež null servera puses renderēšanai.
• RealTimeDataComponent: komponents, kas izmanto āķi useSSE, lai attēlotu reāllaika datus.

3. Integrācija ar IndexedDB

Sinhronizējiet React komponentus ar datiem, kas saglabāti IndexedDB, izmantojot useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise<IDBData[]> {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Replace with your database name and version

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Replace with your store name
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState<IDBData[] | null>(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Debounce the callback to prevent excessive re-renders.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Adjust the debounce delay as needed
    };

    const handleVisibilityChange = () => {
      // Re-fetch data when the tab becomes visible again
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Fetch the latest data from IndexedDB every time getSnapshot is called
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Loading data from IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data from IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Paskaidrojums:

• getAllData: asinhrona funkcija, kas izgūst visus datus no IndexedDB krātuves.
• useIndexedDBData: pielāgots āķis, kas izmanto useSyncExternalStore, lai abonētu izmaiņas IndexedDB.
• subscribe: iestata klausītājus redzamības un fokusa izmaiņām, lai atjauninātu datus no IndexedDB, un izmanto debounce funkciju, lai izvairītos no pārmērīgiem atjauninājumiem.
• getSnapshot: iegūst pašreizējo momentuzņēmumu, izsaucot `getAllData()` un pēc tam atgriežot datus no stāvokļa.
• serverSnapshot: atgriež null servera puses renderēšanai.
• IndexedDBComponent: komponents, kas attēlo datus no IndexedDB.

Svarīgi apsvērumi IndexedDB:

• Asinhronas darbības: Mijiedarbība ar IndexedDB ir asinhrona, tāpēc rūpīgi jāapstrādā datu izgūšanas un atjauninājumu asinhronais raksturs.
• Kļūdu apstrāde: Ieviesiet spēcīgu kļūdu apstrādi, lai graciozi apstrādātu iespējamās problēmas ar datu bāzes piekļuvi, piemēram, datu bāze nav atrasta vai atļauju kļūdas.
• Datu bāzes versiju pārvaldība: Rūpīgi pārvaldiet datu bāzes versijas, izmantojot notikumu onupgradeneeded, lai nodrošinātu datu savietojamību, kad jūsu lietojumprogramma attīstās.
• Veiktspēja: IndexedDB darbības var būt salīdzinoši lēnas, īpaši lieliem datu kopumiem. Optimizējiet vaicājumus un indeksēšanu, lai uzlabotu veiktspēju.

Veiktspējas apsvērumi

Lai gan useSyncExternalStore ir optimizēts veiktspējai, tomēr ir jāņem vērā daži apsvērumi:

• Samazināt momentuzņēmuma izmaiņas: Nodrošiniet, lai funkcija getSnapshot atgriež jaunu momentuzņēmumu tikai tad, kad dati faktiski ir mainījušies. Izvairieties no nevajadzīgas jaunu objektu vai masīvu izveides. Apsveriet iespēju izmantot memoizācijas metodes, lai optimizētu momentuzņēmuma izveidi.
• Partijas atjauninājumi: Ja iespējams, partijas atjauninājumus ārējai krātuvei, lai samazinātu atkārtoto renderējumu skaitu. Piemēram, ja atjaunināt vairākas rekvizīti krātuvē, mēģiniet tos atjaunināt vienā transakcijā.
• Debouncings/Throttleing: Ja ārējā krātuve mainās bieži, apsveriet atjauninājumu debouncingu vai throttleing React komponentam. Tas var novērst pārmērīgu atkārtotu renderēšanu un uzlabot veiktspēju. Tas ir īpaši noderīgi ar nepastāvīgām krātuvēm, piemēram, pārlūkprogrammas loga izmēru maiņu.
• Sekla salīdzināšana: Nodrošiniet, lai jūs atgrieztu primitīvas vērtības vai nemainīgus objektus getSnapshot, lai React varētu ātri noteikt, vai dati ir mainījušies, izmantojot seklu salīdzināšanu.
• Nosacītie atjauninājumi: Gadījumos, kad ārējā krātuve mainās bieži, bet jūsu komponentam ir jāreaģē tikai uz noteiktām izmaiņām, apsveriet iespēju ieviest nosacītos atjauninājumus funkcijā `subscribe`, lai izvairītos no nevajadzīgas atkārtotas renderēšanas.

Bieži sastopamas kļūdas un problēmu novēršana

• Plīsumu problēmas: Ja joprojām saskaraties ar plīsumu problēmām pēc useSyncExternalStore lietošanas, vēlreiz pārbaudiet, vai jūsu funkcija getSnapshot atgriež konsekventu datu skatu un ka funkcija subscribe pareizi paziņo React par izmaiņām. Nodrošiniet, lai jūs tieši nemainītu datus funkcijā getSnapshot.
• Bezgalīgas cilpas: Bezgalīga cilpa var rasties, ja funkcija getSnapshot vienmēr atgriež jaunu vērtību, pat ja dati nav mainījušies. Tas var notikt, ja jūs nevajadzīgi veidojat jaunus objektus vai masīvus. Nodrošiniet, ka atgriežat to pašu vērtību, ja dati nav mainījušies.
• Trūkst servera puses renderēšanas: Ja izmantojat servera puses renderēšanu, pārliecinieties, ka nodrošināt funkciju getServerSnapshot, lai nodrošinātu, ka komponents pareizi renderējas serverī. Šai funkcijai jāatgriež ārējās krātuves sākotnējais stāvoklis.
• Nepareiza abonēšanas atcelšana: Vienmēr pārliecinieties, ka pareizi atceļat abonēšanu no ārējās krātuves funkcijā, ko atgriež subscribe. Ja to neizdarīsit, var rasties atmiņas noplūdes.
• Nepareiza lietošana vienlaicīgā režīmā: Pārliecinieties, vai jūsu ārējā krātuve ir saderīga ar vienlaicīgo režīmu. Izvairieties no izmaiņām ārējā krātuvē, kamēr React renderē. Izmaiņām jābūt sinhronām un paredzamām.

Secinājums

useSyncExternalStore ir spēcīgs rīks React komponentu sinhronizēšanai ar ārējām datu krātuvēm. Izprotot tā darbību un ievērojot labāko praksi, jūs varat nodrošināt, ka jūsu komponenti rāda konsekventus un atjauninātus datus pat sarežģītos vienlaicīgas renderēšanas scenārijos. Šis āķis vienkāršo integrāciju ar dažādiem datu avotiem, sākot no trešo pušu stāvokļa pārvaldības bibliotēkām līdz pārlūkprogrammu API un reāllaika datu straumēm, kas noved pie robustākām un efektīvākām React lietojumprogrammām. Atcerieties vienmēr atrisināt iespējamās kļūdas, optimizēt veiktspēju un rūpīgi pārvaldīt abonementus, lai izvairītos no bieži sastopamām kļūdām.