2025年8月31日中文

探索 React 的 experimental_useSyncExternalStore 钩子以同步外部存储，重点介绍全球开发者的实现、用例和最佳实践。

掌握 React 的 experimental_useSyncExternalStore：综合指南

React 的 experimental_useSyncExternalStore 钩子是用于将 React 组件与外部数据源同步的强大工具。此钩子允许组件有效地订阅外部存储中的更改，并在必要时重新渲染。有效理解和实现 experimental_useSyncExternalStore 对于构建与各种外部数据管理系统无缝集成的高性能 React 应用程序至关重要。

什么是外部存储？

在深入研究钩子的细节之前，重要的是定义我们所说的“外部存储”的含义。外部存储是存在于 React 内部状态之外的任何数据容器或状态管理系统。这可能包括：

全局状态管理库： Redux、Zustand、Jotai、Recoil
浏览器 API： localStorage、sessionStorage、IndexedDB
数据获取库： SWR、React Query
实时数据源： WebSockets、Server-Sent Events
第三方库： 在 React 组件树之外管理配置或数据的库。

与这些外部数据源有效集成通常会带来挑战。React 的内置状态管理可能不足，手动订阅这些外部源中的更改可能会导致性能问题和复杂的代码。experimental_useSyncExternalStore 通过提供一种标准化和优化的方式将 React 组件与外部存储同步来解决这些问题。

介绍 `experimental_useSyncExternalStore`

experimental_useSyncExternalStore 钩子是 React 实验性功能的一部分，这意味着其 API 在未来的版本中可能会发生变化。但是，它的核心功能解决了许多 React 应用程序中的基本需求，因此值得理解和试验。

钩子的基本签名如下：

            const value = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

让我们分解每个参数：

subscribe: (callback: () => void) => () => void：此函数负责订阅外部存储中的更改。它接受一个回调函数作为参数，React 会在存储更改时调用该函数。subscribe 函数应返回另一个函数，该函数在调用时取消回调从存储中的订阅。这对于防止内存泄漏至关重要。
getSnapshot: () => T：此函数返回外部存储中数据的快照。React 将使用此快照来确定自上次渲染以来数据是否已更改。它必须是一个纯函数（没有副作用）。
getServerSnapshot?: () => T (可选)：此函数仅在服务器端渲染 (SSR) 期间使用。它为服务器渲染的 HTML 提供数据的初始快照。如果未提供，React 将在 SSR 期间抛出错误。此函数也应该是纯函数。

该钩子返回外部存储中数据的当前快照。保证此值在组件渲染时与外部存储保持同步。

使用 `experimental_useSyncExternalStore` 的好处

与手动管理外部存储的订阅相比，使用 experimental_useSyncExternalStore 具有以下几个优点：

性能优化： React 可以通过比较快照有效地确定数据何时更改，从而避免不必要的重新渲染。
自动更新： React 自动订阅和取消订阅外部存储，从而简化了组件逻辑并防止了内存泄漏。
SSR 支持： getServerSnapshot 函数支持使用外部存储进行无缝服务器端渲染。
并发安全： 该钩子旨在与 React 的并发渲染功能正确配合使用，从而确保数据始终保持一致。
简化代码： 减少与手动订阅和更新相关的样板代码。

实践示例和用例

为了说明 experimental_useSyncExternalStore 的强大功能，让我们研究几个实际的例子。

1. 与简单的自定义存储集成

首先，让我们创建一个简单的自定义存储来管理计数器：

            // counterStore.js
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

现在，让我们创建一个 React 组件，该组件使用 experimental_useSyncExternalStore 显示和更新计数器：

            // CounterComponent.jsx
import React from 'react';
import { experimental_useSyncExternalStore } from 'react';
import counterStore from './counterStore';

function CounterComponent() {
  const count = experimental_useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot
  );

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

export default CounterComponent;

在此示例中，CounterComponent 使用 experimental_useSyncExternalStore 订阅 counterStore 中的更改。每当在存储上调用 increment 函数时，组件都会重新渲染，显示更新后的计数。

2. 与 `localStorage` 集成

localStorage 是在浏览器中持久保存数据的常用方法。让我们看看如何将其与 experimental_useSyncExternalStore 集成。

            // localStorageStore.js
const localStorageStore = {
  subscribe: (listener) => {
    window.addEventListener('storage', listener);
    return () => {
      window.removeEventListener('storage', listener);
    };
  },
  getSnapshot: (key) => {
    try {
      return localStorage.getItem(key) || '';
    } catch (error) {
      console.error("Error accessing localStorage:", error);
      return '';
    }
  },
  setItem: (key, value) => {
    try {
      localStorage.setItem(key, value);
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  },
};

export default localStorageStore;

有关 `localStorage` 的重要说明：

`storage` 事件仅在访问相同来源的*其他*浏览器上下文（例如，其他选项卡、窗口）中触发。在同一选项卡中，您需要在设置项目后手动分派该事件。
`localStorage` 可能会引发错误（例如，当超出配额时）。将操作包装在 `try...catch` 块中至关重要。

现在，让我们创建一个使用此存储的 React 组件：

            // LocalStorageComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import localStorageStore from './localStorageStore';

function LocalStorageComponent({ key }) {
  const [inputValue, setInputValue] = useState('');
  const storedValue = experimental_useSyncExternalStore(
    localStorageStore.subscribe,
    () => localStorageStore.getSnapshot(key)
  );

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSave = () => {
    localStorageStore.setItem(key, inputValue);
  };

  return (
    <div>
      <label>Value for key "{key}":</label>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleSave}>Save to LocalStorage</button>
      <p>Stored Value: {storedValue}</p>
    </div>
  );
}

export default LocalStorageComponent;

此组件允许用户输入文本，将其保存到 localStorage，并显示存储的值。experimental_useSyncExternalStore 钩子确保组件始终反映 localStorage 中的最新值，即使它从另一个选项卡或窗口更新也是如此。

3. 与全局状态管理库 (Zustand) 集成

对于更复杂的应用程序，您可能正在使用全局状态管理库，例如 Zustand。以下是如何将 Zustand 与 experimental_useSyncExternalStore 集成。

            // zustandStore.js
import { create } from 'zustand';

const useZustandStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) =>
    set((state) => ({ items: state.items.filter((item) => item.id !== itemId) })),
}));

export default useZustandStore;

现在创建一个 React 组件：

            // ZustandComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import useZustandStore from './zustandStore';
import { v4 as uuidv4 } from 'uuid';

function ZustandComponent() {
  const [itemName, setItemName] = useState('');
  const items = experimental_useSyncExternalStore(
    useZustandStore.subscribe,
    useZustandStore.getState
  ).items;

  const handleAddItem = () => {
    if (itemName.trim() !== '') {
      useZustandStore.getState().addItem({ id: uuidv4(), name: itemName });
      setItemName('');
    }
  };

  const handleRemoveItem = (itemId) => {
    useZustandStore.getState().removeItem(itemId);
  };

  return (
    <div>
      <input
        type="text"
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        placeholder="Item Name"
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ZustandComponent;

在此示例中，ZustandComponent 订阅 Zustand 存储并显示项目列表。添加或删除项目时，组件会自动重新渲染以反映 Zustand 存储中的更改。

使用 `experimental_useSyncExternalStore` 进行服务器端渲染 (SSR)

在服务器端渲染的应用程序中使用 experimental_useSyncExternalStore 时，您需要提供 getServerSnapshot 函数。此函数允许 React 在服务器端渲染期间获取数据的初始快照。如果没有它，React 将抛出错误，因为它无法访问服务器上的外部存储。

以下是如何修改我们的简单计数器示例以支持 SSR：

            // counterStore.js (SSR-enabled)
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  getServerSnapshot: () => 0, // Provide an initial value for SSR
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

在此修改后的版本中，我们添加了 getServerSnapshot 函数，该函数返回计数器的初始值 0。这确保服务器渲染的 HTML 包含计数器的有效值，并且客户端组件可以从服务器渲染的 HTML 无缝地进行水合。

对于更复杂的场景，例如处理从数据库获取的数据时，您需要在服务器上获取数据，并将其作为 getServerSnapshot 中的初始快照提供。

最佳实践和注意事项

使用 experimental_useSyncExternalStore 时，请记住以下最佳实践：

保持 getSnapshot 纯净： getSnapshot 函数应该是一个纯函数，这意味着它不应该有任何副作用。它应该只返回数据的快照而不修改外部存储。
最小化快照大小： 尽量最小化 getSnapshot 返回的快照大小。React 比较快照以确定数据是否已更改，因此较小的快照将提高性能。
优化订阅逻辑： 确保 subscribe 函数有效地订阅外部存储中的更改。避免不必要的订阅或可能减慢应用程序速度的复杂逻辑。
优雅地处理错误： 准备好处理访问外部存储时可能发生的错误，尤其是在像 localStorage 这样的环境中，存储配额可能会被超出。
考虑记忆化： 如果快照的生成在计算上很昂贵，请考虑记忆化 getSnapshot 的结果以避免冗余计算。像 useMemo 这样的库会很有帮助。
注意并发模式： 确保您的外部存储与 React 的并发渲染功能兼容。并发模式可能会在提交渲染之前多次调用 getSnapshot。

全球注意事项

为全球受众开发 React 应用程序时，在与外部存储集成时，请考虑以下几点：

时区： 如果您的外部存储管理日期或时间，请确保正确处理时区，以避免不同地区的用户出现不一致。使用像 date-fns-tz 或 moment-timezone 这样的库来管理时区。
本地化： 如果您的外部存储包含需要本地化的文本或其他内容，请使用像 i18next 或 react-intl 这样的本地化库，以便根据用户的语言偏好向用户提供本地化的内容。
货币： 如果您的外部存储管理财务数据，请确保正确处理货币，并为不同的区域设置提供适当的格式。使用像 currency.js 或 accounting.js 这样的库来管理货币。
数据隐私： 在将用户数据存储在像 localStorage 或 sessionStorage 这样的外部存储中时，请注意数据隐私法规，例如 GDPR。在存储敏感数据之前获得用户同意，并提供用户访问和删除其数据的机制。

`experimental_useSyncExternalStore` 的替代方案

虽然 experimental_useSyncExternalStore 是一个强大的工具，但还有其他方法可以将 React 组件与外部存储同步：

Context API： React 的 Context API 可用于将外部存储中的数据提供给组件树。但是，对于频繁更新的大型应用程序，Context API 可能不如 experimental_useSyncExternalStore 高效。
Render Props： Render props 可用于订阅外部存储中的更改并将数据传递给子组件。但是，render props 可能会导致复杂的组件层次结构和难以维护的代码。
自定义钩子： 您可以创建自定义钩子来管理外部存储的订阅。但是，此方法需要仔细注意性能优化和错误处理。

使用哪种方法的选择取决于应用程序的特定要求。对于需要高频率更新和高性能的复杂应用程序，experimental_useSyncExternalStore 通常是最佳选择。

结论

experimental_useSyncExternalStore 提供了一种强大而有效的方式来将 React 组件与外部数据源同步。通过理解其核心概念、实践示例和最佳实践，开发人员可以构建高性能的 React 应用程序，这些应用程序可以与各种外部数据管理系统无缝集成。随着 React 的不断发展，experimental_useSyncExternalStore 可能会成为构建面向全球受众的复杂且可扩展的应用程序的更重要的工具。请记住，在将它集成到您的项目中时，要仔细考虑其实验性状态和潜在的 API 更改。始终查阅官方 React 文档以获取最新的更新和建议。