React useSyncExternalStore: Овладяване на интеграцията на външно състояние

Кукичката useSyncExternalStore на React, въведена в React 18, предоставя мощен и ефективен начин за интегриране на външни източници на данни и библиотеки за управление на състоянието във вашите React компоненти. Тази кукичка позволява на компонентите да се абонират за промени във външни хранилища (stores), като гарантира, че потребителският интерфейс винаги отразява най-новите данни, докато оптимизира производителността. Това ръководство предоставя изчерпателен преглед на useSyncExternalStore, обхващайки неговите основни концепции, модели на употреба и добри практики.

Разбиране на нуждата от useSyncExternalStore

В много React приложения ще се сблъскате със сценарии, при които състоянието трябва да се управлява извън дървото на компонентите. Това често се случва, когато се работи с:

• Библиотеки на трети страни: Интеграция с библиотеки, които управляват собственото си състояние (напр. връзка с база данни, API на браузъра или физически енджин).
• Споделено състояние между компоненти: Управление на състояние, което трябва да бъде споделено между компоненти, които не са пряко свързани (напр. статус на удостоверяване на потребителя, настройки на приложението или глобална шина за събития).
• Външни източници на данни: Извличане и показване на данни от външни API или бази данни.

Традиционните решения за управление на състоянието като useState и useReducer са подходящи за управление на локалното състояние на компонента. Те обаче не са предназначени за ефективно справяне с външно състояние. Използването им директно с външни източници на данни може да доведе до проблеми с производителността, непоследователни актуализации и сложен код.

useSyncExternalStore решава тези предизвикателства, като предоставя стандартизиран и оптимизиран начин за абониране за промени във външни хранилища. Той гарантира, че компонентите се прерисуват само когато съответните данни се променят, минимизирайки ненужните актуализации и подобрявайки общата производителност.

Основни концепции на useSyncExternalStore

useSyncExternalStore приема три аргумента:

1. subscribe: Функция, която приема обратна връзка (callback) като аргумент и се абонира за външното хранилище. Обратната връзка ще бъде извикана, когато данните в хранилището се променят.
2. getSnapshot: Функция, която връща моментна снимка (snapshot) на данните от външното хранилище. Тази функция трябва да връща стабилна стойност, която React може да използва, за да определи дали данните са се променили. Тя трябва да бъде чиста и бърза.
3. getServerSnapshot (опционално): Функция, която връща първоначалната стойност на хранилището по време на рендиране от страна на сървъра. Това е от решаващо значение за гарантиране, че първоначалният HTML съответства на рендирането от страна на клиента. Използва се САМО в среди за рендиране от страна на сървъра. Ако бъде пропусната в среда от страна на клиента, вместо нея се използва getSnapshot. Важно е тази стойност никога да не се променя, след като е първоначално рендирана от страна на сървъра.

Ето разбивка на всеки аргумент:

1. subscribe

Функцията subscribe е отговорна за установяване на връзка между React компонента и външното хранилище. Тя получава функция за обратна връзка, която трябва да извика, когато данните в хранилището се променят. Тази обратна връзка обикновено се използва за задействане на повторно рендиране на компонента.

Пример:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

В този пример store.addListener добавя обратната връзка към списъка със слушатели на хранилището. Функцията връща функция за почистване, която премахва слушателя, когато компонентът се демонтира, предотвратявайки изтичане на памет.

2. getSnapshot

Функцията getSnapshot е отговорна за извличане на моментна снимка на данните от външното хранилище. Тази снимка трябва да бъде стабилна стойност, която React може да използва, за да определи дали данните са се променили. React използва Object.is, за да сравни текущата снимка с предишната. Следователно, тя трябва да бъде бърза и силно се препоръчва да връща примитивна стойност (низ, число, булева стойност, null или undefined).

Пример:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

В този пример store.getData връща текущите данни от хранилището. React ще сравни тази стойност с предишната стойност, за да определи дали компонентът трябва да бъде прерисуван.

3. getServerSnapshot (Опционално)

Функцията getServerSnapshot е релевантна само когато се използва рендиране от страна на сървъра (SSR). Тази функция се извиква по време на първоначалното рендиране на сървъра и нейният резултат се използва като първоначална стойност на хранилището преди хидратацията да се случи на клиента. Връщането на последователни стойности е от решаващо значение за успешния SSR.

Пример:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

В този пример `store.getInitialDataForServer` връща първоначалните данни, подходящи за рендиране от страна на сървъра.

Основен пример за употреба

Нека разгледаме прост пример, в който имаме външно хранилище, което управлява брояч. Можем да използваме useSyncExternalStore, за да покажем стойността на брояча в React компонент:

            // External store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

В този пример createStore създава просто външно хранилище, което управлява стойността на брояч. Компонентът Counter използва useSyncExternalStore, за да се абонира за промени в хранилището и да покаже текущата стойност. Когато бутонът за увеличаване е натиснат, функцията setState актуализира стойността на хранилището, което задейства повторно рендиране на компонента.

Интеграция с библиотеки за управление на състоянието

useSyncExternalStore е особено полезен за интеграция с библиотеки за управление на състоянието като Zustand, Jotai и Recoil. Тези библиотеки предоставят свои собствени механизми за управление на състоянието, а useSyncExternalStore ви позволява безпроблемно да ги интегрирате във вашите React компоненти.

Ето пример за интеграция със Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand опростява създаването на хранилище. Неговите вътрешни реализации на subscribe и getSnapshot се използват имплицитно, когато се абонирате за определено състояние.

Ето пример за интеграция с Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai използва атоми (atoms) за управление на състоянието. useAtom вътрешно се грижи за абонамента и създаването на моментни снимки.

Оптимизация на производителността

useSyncExternalStore предоставя няколко механизма за оптимизиране на производителността:

• Селективни актуализации: React прерисува компонента само когато стойността, върната от getSnapshot, се промени. Това гарантира, че се избягват ненужни повторни рендирания.
• Групиране на актуализации: React групира актуализации от множество външни хранилища в едно повторно рендиране. Това намалява броя на повторните рендирания и подобрява общата производителност.
• Избягване на остарели затваряния (Stale Closures): useSyncExternalStore гарантира, че компонентът винаги има достъп до най-новите данни от външното хранилище, дори когато се работи с асинхронни актуализации.

За да оптимизирате допълнително производителността, обмислете следните добри практики:

• Минимизирайте количеството данни, връщани от getSnapshot: Връщайте само данните, които са действително необходими на компонента. Това намалява количеството данни, които трябва да се сравняват, и подобрява ефективността на процеса на актуализация.
• Използвайте техники за мемоизация: Мемоизирайте резултатите от скъпи изчисления или трансформации на данни. Това може да предотврати ненужни повторни изчисления и да подобри производителността.
• Избягвайте ненужни абонаменти: Абонирайте се за външното хранилище само когато компонентът е действително видим. Това може да намали броя на активните абонаменти и да подобри общата производителност.
• Уверете се, че getSnapshot връща нов *стабилен* обект само ако данните са се променили: Избягвайте създаването на нови обекти/масиви/функции, ако основните данни всъщност не са се променили. Върнете същия обект по референция, ако е възможно.

Рендиране от страна на сървъра (SSR) с useSyncExternalStore

Когато използвате useSyncExternalStore с рендиране от страна на сървъра (SSR), е от решаващо значение да предоставите функция getServerSnapshot. Тази функция гарантира, че първоначалният HTML, рендиран на сървъра, съответства на рендирането от страна на клиента, предотвратявайки грешки при хидратация и подобрявайки потребителското изживяване.

Ето пример за използване на getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important for SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

В този пример getServerSnapshot връща първоначалната стойност на брояча. Това гарантира, че първоначалният HTML, рендиран на сървъра, съответства на рендирането от страна на клиента. `getServerSnapshot` трябва да връща стабилна и предвидима стойност. Тя също така трябва да изпълнява същата логика като функцията getSnapshot на сървъра. Избягвайте достъпа до специфични за браузъра API или глобални променливи в getServerSnapshot.

Напреднали модели на употреба

useSyncExternalStore може да се използва в различни напреднали сценарии, включително:

• Интеграция с API на браузъра: Абониране за промени в API на браузъра като localStorage или navigator.onLine.
• Създаване на персонализирани кукички (Custom Hooks): Капсулиране на логиката за абониране за външно хранилище в персонализирана кукичка.
• Използване с Context API: Комбиниране на useSyncExternalStore с React Context API за предоставяне на споделено състояние на дърво от компоненти.

Нека разгледаме пример за създаване на персонализирана кукичка за абониране за localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event for same-page updates
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

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

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

В този пример useLocalStorage е персонализирана кукичка, която се абонира за промени в localStorage. Тя използва useSyncExternalStore за управление на абонамента и извличане на текущата стойност от localStorage. Тя също така правилно изпраща събитие за съхранение, за да гарантира, че актуализациите на същата страница се отразяват (тъй като събитията `storage` се задействат само в други раздели). serverSnapshot гарантира, че първоначалните стойности се предоставят правилно в сървърни среди.

Добри практики и често срещани капани

Ето някои добри практики и често срещани капани, които трябва да избягвате, когато използвате useSyncExternalStore:

• Избягвайте директната мутация на външното хранилище: Винаги използвайте API на хранилището, за да актуализирате данните. Директната мутация на хранилището може да доведе до непоследователни актуализации и неочаквано поведение.
• Уверете се, че getSnapshot е чиста и бърза: getSnapshot не трябва да има странични ефекти и трябва бързо да връща стабилна стойност. Скъпите изчисления или трансформации на данни трябва да бъдат мемоизирани.
• Предоставяйте функция getServerSnapshot, когато използвате SSR: Това е от решаващо значение за гарантиране, че първоначалният HTML, рендиран на сървъра, съответства на рендирането от страна на клиента.
• Обработвайте грешките елегантно: Използвайте try-catch блокове за обработка на потенциални грешки при достъп до външното хранилище.
• Почиствайте абонаментите: Винаги се отписвайте от външното хранилище, когато компонентът се демонтира, за да предотвратите изтичане на памет. Функцията subscribe трябва да връща функция за почистване, която премахва слушателя.
• Разберете последиците за производителността: Въпреки че useSyncExternalStore е оптимизиран за производителност, е важно да се разбере потенциалното въздействие от абонирането за външни хранилища. Минимизирайте количеството данни, връщани от getSnapshot, и избягвайте ненужните абонаменти.
• Тествайте обстойно: Уверете се, че интеграцията с хранилището работи правилно в различни сценарии, особено при рендиране от страна на сървъра и в конкурентен режим.

Заключение

useSyncExternalStore е мощна и ефективна кукичка за интегриране на външни източници на данни и библиотеки за управление на състоянието във вашите React компоненти. Като разбирате основните й концепции, модели на употреба и добри практики, можете ефективно да управлявате споделеното състояние във вашите React приложения и да оптимизирате производителността. Независимо дали се интегрирате с библиотеки на трети страни, управлявате споделено състояние между компоненти или извличате данни от външни API, useSyncExternalStore предоставя стандартизирано и надеждно решение. Възползвайте се от него, за да изграждате по-стабилни, поддържаеми и производителни React приложения за глобална аудитория.

Допълнителни ресурси

• React документация за useSyncExternalStore
• React 18 Pull Request, въвеждащ useSyncExternalStore
• Библиотека за управление на състоянието Zustand
• Библиотека за управление на състоянието Jotai