精读React hooks（十三）：使用useSyncExternalStore获取实时数据

🧑‍💻

推荐全栈学习资源：

Next.js 中文文档：样式和官网一样的中文文档，创造沉浸式Next.js中文学习体验。

《Chrome插件全栈开发》：真实出海项目的实战教学课，讲解Chrome插件和Next.js端的全栈开发，帮助你半个月内成为全栈出海工程师。

随着 React v18 引入并发模式，React 也支持了在处理多个任务时进行优先级调整，这意味着 React 可以“暂停”一个正在进行的渲染任务，切换到另一个更高优先级的任务，然后再回到原来的任务。这使得用户界面响应更快，但也带来了新的挑战，尤其是在状态管理方面——状态管理库需要确保它们提供的状态始终是最新的和同步的。useSyncExternalStore就是为解决并发模式下的状态同步问题而推出的——它提供了一种方法，确保即使在并发更新的情况下，组件也可以同步地从外部存储中获取数据。

简单来说，useSyncExternalStore解决的是并发模式下数据流管理的问题。

`useSyncExternalStore`的使用

这是useSyncExternalStore的用法定义：

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

它的三个参数用法比较复杂，这里详细介绍一下：

subscribe：
- 类型：((callback: () => void) => () => void)
- 这是一个函数，其作用是订阅外部存储的变化。当外部存储发生变化时，它应该调用传入的 callback。
- 这个函数应该返回一个取消订阅的函数。这样，当组件被卸载或订阅被重新创建时，我们可以确保没有内存泄漏或无效的回调调用。
getSnapshot：
- 类型：() => Snapshot
- 这是一个函数，其作用是从外部存储中获取当前的数据快照。
- 每次组件渲染时，useSyncExternalStore都会调用此函数来读取当前的数据状态。
getServerSnapshot? (可选参数)：
- 类型： () => Snapshot
- 这个函数的作用与 getSnapshot 类似，但它是为服务端渲染（SSR）或预渲染时使用的。在客户端首次渲染或 hydrate 操作期间，React 会使用此函数而不是getSnapshot来读取数据的初始状态。这是为了确保在服务端渲染的内容与客户端的初始内容匹配，从而避免不必要的重新渲染和闪烁。如果你的应用不涉及服务端渲染，那么不需要这个参数。

下面我们从几个应用开发者也能接触到的场景先学习useSyncExternalStore是怎么用的。

从`store`里获取数据

想象你要做一个博客文章的状态管理功能，你希望所有渲染文章列表的组件都能实时获取最新的数据，那么就可以这样做：

先创建状态store：

/*
 * articlesStore.js 
 */
 
// 初始化文章 ID 计数器
let nextId = 0;
 
// 初始文章列表
let articles = [{ id: nextId++, title: 'Article #1', content: 'This is the content of Article #1.' }];
 
// 用于存储所有订阅文章列表更改的监听器
let listeners = [];
 
export const articlesStore = {
  addArticle(title, content) {
    articles = [...articles, { id: nextId++, title: title, content: content }];
    // 通知所有监听器文章列表已更改
    emitChange();
  },
  // 订阅文章列表更改的方法
  subscribe(listener) {
    // 添加新的监听器
    listeners = [...listeners, listener];
    // 返回一个取消订阅的函数
    return () => {
      // 删除监听器
      listeners = listeners.filter(l => l !== listener);
    };
  },
  // 获取当前文章列表的“快照”
  getSnapshot() {
    return articles;
  }
};
 
// 通知所有监听器的辅助函数，遍历 listeners 数组并调用每个监听器
function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

然后你可以在需要渲染文章列表的组件里实现实时数据渲染了：

import { useSyncExternalStore } from 'react';
import { articlesStore } from './articlesStore.js';
 
export default function ArticlesApp() {
  // 使用 useSyncExternalStore 订阅文章列表的更改
  const articles = useSyncExternalStore(articlesStore.subscribe, articlesStore.getSnapshot);
 
  // 当点击按钮时添加新文章的处理函数
  const handleAddArticle = () => {
    // ……
    articlesStore.addArticle(title, content);
  };
 
  return (
    <>
      <button onClick={handleAddArticle}>Add Article</button>
      <ul>
        {/* 映射文章列表以显示每篇文章的标题和内容 */}
        {articles.map(article => (
          <li key={article.id}>
            {* …… *}
          </li>
        ))}
      </ul>
    </>
  );
}

这个示例只是为解释useSyncExternalStore的用法使用的，实际场景中的逻辑一定比这个复杂得多。但这个简单的示例已经足够让我们看到useSyncExternalStore的价值了——如果有多个组件会触发文章列表的更新，那么使用了useSyncExternalStore监听数据变化的组件都能实时刷新数据。在使用useSyncExternalStore以前，我们通常是在进入页面时获取新数据，或者用定时器定时来更新数据。

从浏览器API获取数据

现在我们用一个更加直观的示例来看看useSyncExternalStore的能力。

我们计划用useSyncExternalStore来监听网络状态，并把网络状态显示在页面上。网络状态可以从navigator里的onLine获取。

在代码设计层面，我们需要知道useSyncExternalStore更新的数据通常可能被多个组件引用，那么写一个自定义 hook 是最合理的方式，那么这个示例中我们就写一个自定义 hook 来实现核心逻辑：

import { useSyncExternalStore } from 'react';
 
export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  return isOnline;
}
 
function getSnapshot() {
  return navigator.onLine;
}
 
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

在页面调用useOnlineStatus就可以获取onLine的最新值：

import { useOnlineStatus } from './useOnlineStatus.js';
 
export default function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

这个示例完美地展示了useSyncExternalStore实时获取数据的能力，不信现在我们拔掉网线和插上网线，页面都会自动更新网络状态。你可以直接到👉我的演示站体验。

注意事项

getSnapshot的返回值不能总是不同的对象

useSyncExternalStore依赖getSnapshot函数返回的值来决定是否重新渲染。如果每次都返回新的对象，即使对象的内容相同，React 会认为状态已经变化并重新渲染组件。

function getSnapshot() {
  // 🔴 getSnapshot 不要总是返回不同的对象
  return {
    todos: myStore.todos
  };
}

正确的返回值应该这样写：

function getSnapshot() {
  // ✅ 你可以返回不可变数据
  return myStore.todos;
}

subscribe不要放在组件内定义

如果 subscribe 函数在组件内部定义，那么每次组件渲染都会创建一个新的 subscribe 函数实例。这是由于 useSyncExternalStore 会在 subscribe 函数改变时重新订阅，这意味着每次重新渲染都会导致重新订阅，可能导致不必要的开销，尤其是当订阅操作涉及复杂的计算或外部资源时。

function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  
  // 🚩 总是不同的函数，所以 React 每次重新渲染都会重新订阅
  function subscribe() {
    // ...
  }
 
  // ...
}