前言

状态管理在现代 React 应用中的重要性

在现代前端开发中，状态管理是一个非常重要的课题，尤其是在构建复杂的用户界面时。有效的状态管理能够显著提升软件的可靠性和可维护性，同时简化数据在组件树中传递和共享的过程。React 从一开始就以其独特的组件化架构和单向数据流的设计，使得状态管理在组件内变得较为简单。然而，在涉及多个组件之间共享状态，或者跨应用逻辑共享复杂状态时，单纯的 React 状态管理方案就有些力不从心了。

这是为什么业内诞生了许多流行的状态管理库，例如 Redux、MobX 和 Zustand。这些库为开发者提供了丰富的 API 和工具，以更高效且一目了然的方式管理复杂应用中的状态，提升开发体验和软件性能。

React 18 引入 `useSyncExternalStore` Hook 的背景与动机

随着 React 18 的发布，引入了一个新的 Hook —— useSyncExternalStore。它旨在解决一些状态管理中的痛点，尤其是在使用外部存储系统（如 Redux，Zustand，或者自定义的存储）时的状态订阅与同步问题。

在此之前，开发者主要使用 useEffect 或 useLayoutEffect 来订阅外部存储的状态变化，但这种方法有时会造成一定的困扰和性能问题：

订阅和取消订阅的复杂逻辑：需要手动编写订阅和取消订阅逻辑。
状态同步延迟：由于 useEffect 的异步特性，状态有可能会出现延迟同步的问题，特别是在有大量依赖更新的情况下。
复杂性和易错性：手动处理副作用和依赖管理增加了代码复杂性，使得程序更容易出错。

useSyncExternalStore 的引入简化了这些逻辑，并提供了一种更优雅和更高效的方式来同步外部存储的状态，使开发者能够专注于业务实现，而不是纠结于低层次的状态管理细节。

回顾 Zustand 源码介绍

在上一篇文章《Zustand 源码解析》中提到，Zustand 通过引入 useSyncExternalStore 来处理 React 组件的状态同步。这使得开发者可以更加简洁地与外部存储交互，实现状态的自动订阅和更新机制。useSyncExternalStore 提供了一个一致的 API 接口，用于在组件的挂载和更新期间进行状态管理。

在实际使用中，Zustand 内部对 useSyncExternalStore 进行了封装和处理，使得开发者在使用时无需关心底层实现细节，只需要专注于如何高效地定义和操作状态即可。

在接下来的章节中，我们将结合 React 源码详细讨论 useSyncExternalStore 的实现和运行机制。

`useSyncExternalStore`解析

`useSyncExternalStore`简介

useSyncExternalStore 是在 React 18 中引入的一个新的 Hook，旨在解决状态同步问题，尤其是在与外部存储系统（如 Redux、Zustand 等）交互时。它提供了一种便捷的方式来订阅存储的变化，并确保组件能够同步地获取最新的状态值。

作用与适用场景：

跨组件共享状态：当你需要在多个组件之间共享状态时，useSyncExternalStore 可以确保所有订阅组件获取到的都是最新的状态，避免数据不一致的问题。
状态与业务逻辑解耦：通过 useSyncExternalStore，可以将状态管理逻辑从组件中抽离出来，简化组件代码，使业务逻辑更加清晰。
高效的状态同步：这个 Hook 支持严格的同步机制，确保存储更新后，所有组件立刻获得最新的状态，而不会出现异步更新带来的视觉不一致问题。

初次挂载与更新阶段的不同实现

在 React 内部，useSyncExternalStore 的执行逻辑分为初次挂载和更新两个阶段。这两个阶段的实现分别由 mountSyncExternalStore 和 updateSyncExternalStore 函数负责，分别在 HooksDispatcherOnMount 和 HooksDispatcherOnUpdate 中调用。

React 使用 “Dispatcher” 来管理 Hook 的调用，使开发者在使用 Hook 时不需要关心它们的底层实现逻辑。这些 Dispatcher 确保了 Hook 在挂载和更新阶段的正确行为。

`HooksDispatcherOnMount`

在组件的初次挂载阶段，React 使用 HooksDispatcherOnMount 处理所有 Hook 的调用。它负责初始化 Hook 的状态和其他必要的设置，包括订阅外部存储的变化。

const HooksDispatcherOnMount: Dispatcher = {
  readContext,

  use,
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useInsertionEffect: mountInsertionEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue,
  useDeferredValue: mountDeferredValue,
  useTransition: mountTransition,
  useSyncExternalStore: mountSyncExternalStore,
  useId: mountId,
};

在 HooksDispatcherOnMount 中，每个 Hook 的调用都映射到一个对应的 mount 函数。这些函数负责创建和初始化 Hook 的状态。

初始化状态：例如，useState 对应 mountState，负责在初次挂载时创建和初始化状态。
订阅外部存储：useSyncExternalStore 对应 mountSyncExternalStore，负责在初次挂载时订阅外部存储的变化并初始化状态。

`HooksDispatcherOnUpdate`

在组件的更新阶段，React 使用 HooksDispatcherOnUpdate 处理所有 Hook 的调用。它主要任务是更新已有的 Hook 状态，并检查是否需要重新订阅外部存储。

const HooksDispatcherOnUpdate: Dispatcher = {
  readContext,

  use,
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useInsertionEffect: updateInsertionEffect,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  useDebugValue: updateDebugValue,
  useDeferredValue: updateDeferredValue,
  useTransition: updateTransition,
  useSyncExternalStore: updateSyncExternalStore,
  useId: updateId,
};

在 HooksDispatcherOnUpdate 中，每个 Hook 的调用都映射到一个对应的 update 函数。这些函数负责读取和更新已有的 Hook 状态。

更新状态：例如，useState 对应 updateState，负责在组件更新时读取和更新状态。
重新订阅外部存储：useSyncExternalStore 对应 updateSyncExternalStore，负责在组件更新时重新订阅外部存储的变化并更新状态。

通过 HooksDispatcherOnMount 和 HooksDispatcherOnUpdate，React 确保了在初次挂载和更新阶段对 Hook 的正确处理。不同的 Dispatcher 负责各自阶段的 Hook 调用和状态管理，使得 Hook 能够在 React 生命周期中保持一致和高效。

`mountSyncExternalStore` 实现解析

源码解析

mountSyncExternalStore 的主要职责是订阅外部存储、初始化状态，并预设更新机制。以下是 mountSyncExternalStore 的源码：

function mountSyncExternalStore<T>(
  subscribe: (() => void) => () => void, // 用于订阅存储变化的函数
  getSnapshot: () => T, // 返回当前存储状态快照的函数
  getServerSnapshot?: () => T, // 可选函数，用于服务器端渲染时返回初始快照
): T {
  const fiber = currentlyRenderingFiber; // 当前正在渲染的 Fiber 节点
  const hook = mountWorkInProgressHook(); // 创建并初始化当前 Hook，准备存储状态

  let nextSnapshot;
  const isHydrating = getIsHydrating(); // 检查是否在进行服务器端 Hydration
  if (isHydrating) {
    // 处理服务器端渲染的情况
    if (getServerSnapshot === undefined) {
      throw new Error(
        'Missing getServerSnapshot, which is required for ' +
          'server-rendered content. Will revert to client rendering.',
      );
    }
    nextSnapshot = getServerSnapshot(); // 获取初始服务器端快照
    if (__DEV__) {
      if (!didWarnUncachedGetSnapshot) {
        if (nextSnapshot !== getServerSnapshot()) {
          console.error(
            'The result of getServerSnapshot should be cached to avoid an infinite loop',
          );
          didWarnUncachedGetSnapshot = true;
        }
      }
    }
  } else {
    // 处理客户端渲染的情况
    nextSnapshot = getSnapshot(); // 获取初始快照
    if (__DEV__) {
      if (!didWarnUncachedGetSnapshot) {
        const cachedSnapshot = getSnapshot();
        if (!is(nextSnapshot, cachedSnapshot)) {
          console.error(
            'The result of getSnapshot should be cached to avoid an infinite loop',
          );
          didWarnUncachedGetSnapshot = true;
        }
      }
    }
    const root: FiberRoot | null = getWorkInProgressRoot();

    if (root === null) {
      throw new Error(
        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
      );
    }

    const rootRenderLanes = getWorkInProgressRootRenderLanes();
    if (!includesBlockingLane(root, rootRenderLanes)) {
      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
    }
  }

  hook.memoizedState = nextSnapshot; // 存储初始快照

  const inst: StoreInstance<T> = {
    value: nextSnapshot,
    getSnapshot,
  };
  hook.queue = inst; // 创建存储实例

  // 订阅存储变化并设置 Effect
  mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);

  fiber.flags |= PassiveEffect;
  pushEffect(
    HookHasEffect | HookPassive,
    updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
    createEffectInstance(),
    null,
  );

  return nextSnapshot; // 返回初始快照
}

运行机制

获取当前 Fiber 和 Hook

currentlyRenderingFiber 表示当前正在渲染的 Fiber 节点。
mountWorkInProgressHook 创建并初始化当前 Hook，准备存储状态。

获取初始快照

服务器端 Hydration：如果在进行服务器端 Hydration，需要调用 getServerSnapshot 获取初始快照。
客户端渲染：调用 getSnapshot 获取初始状态快照，并进行一致性检查，避免无效循环。

存储初始快照

将初始状态存储在 Hook 的 memoizedState 属性中，以确保在进一步的 Hook 调用中使用。

订阅存储和更新实例

创建一个存储实例并设置 Effect 钩子，以便在状态变化时触发更新。

潜在问题与优化策略

在实现 mountSyncExternalStore 时，有一些潜在问题需要注意，并且可以通过优化来增强代码的健壮性和性能。

状态缓存与无效循环:
- 问题: 如果 getSnapshot 返回的结果不一致，可能会导致无效的重渲染循环。
- 解决方案: 确保 getSnapshot 能够返回一致的快照结果，并在开发环境中进行适当的校验和警告。
订阅管理与资源释放:
- 问题: 如果在组件卸载时没有正确释放订阅，可能会导致内存泄漏。
- 解决方案: 在 mountEffect 设置的 Effect 中正确管理订阅和取消订阅逻辑，确保资源能够及时释放。

`updateSyncExternalStore` 实现解析

源码解析

updateSyncExternalStore 的主要目标在于读取存储的当前状态、检查是否发生变化，并在必要时更新现有的 Hook 状态和订阅。以下是 updateSyncExternalStore 的源码：

function updateSyncExternalStore<T>(
  subscribe: (() => void) => () => void, // 用于订阅存储变化的函数
  getSnapshot: () => T, // 返回当前存储状态快照的函数
  getServerSnapshot?: () => T, // 可选函数，用于服务器端渲染时返回初始快照
): T {
  const fiber = currentlyRenderingFiber; // 当前正在渲染的 Fiber 节点
  const hook = updateWorkInProgressHook(); // 获取和更新当前 Fiber 上的 Hook 状态

  let nextSnapshot;
  const isHydrating = getIsHydrating(); // 检查是否在进行服务器端 Hydration
  if (isHydrating) {
    if (getServerSnapshot === undefined) {
      throw new Error(
        'Missing getServerSnapshot, which is required for ' +
          'server-rendered content. Will revert to client rendering.',
      );
    }
    nextSnapshot = getServerSnapshot(); // 获取初始服务器端快照
  } else {
    nextSnapshot = getSnapshot(); // 获取当前快照
    if (__DEV__) {
      if (!didWarnUncachedGetSnapshot) {
        const cachedSnapshot = getSnapshot();
        if (!is(nextSnapshot, cachedSnapshot)) {
          console.error(
            'The result of getSnapshot should be cached to avoid an infinite loop',
          );
          didWarnUncachedGetSnapshot = true;
        }
      }
    }
  }

  const prevSnapshot = (currentHook || hook).memoizedState; // 获取之前存储的快照
  const snapshotChanged = !is(prevSnapshot, nextSnapshot); // 检查快照是否发生变化
  if (snapshotChanged) {
    hook.memoizedState = nextSnapshot; // 更新快照状态
    markWorkInProgressReceivedUpdate();
  }

  const inst = hook.queue; // 获取存储实例

  // 更新订阅和副作用
  updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);

  if (
    inst.getSnapshot !== getSnapshot ||
    snapshotChanged ||
    (workInProgressHook !== null &&
      workInProgressHook.memoizedState.tag & HookHasEffect)
  ) {
    fiber.flags |= PassiveEffect;
    pushEffect(
      HookHasEffect | HookPassive,
      updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
      createEffectInstance(),
      null,
    );

    const root: FiberRoot | null = getWorkInProgressRoot();

    if (root === null) {
      throw new Error(
        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
      );
    }

    if (!isHydrating && !includesBlockingLane(root, renderLanes)) {
      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
    }
  }

  return nextSnapshot; // 返回更新后的快照
}

运行机制

获取当前 Fiber 和 Hook

currentlyRenderingFiber 表示当前正在渲染的 Fiber 节点。
updateWorkInProgressHook 用于获取和更新当前 Fiber 上的 Hook 状态。

获取快照

服务器端 Hydration：如果在进行服务器端 Hydration，需要调用 getServerSnapshot 获取当前快照。
客户端渲染：通过 getSnapshot 获取当前状态快照，并在开发环境中进行一致性检查。

检查快照变化

比较新的快照和之前的快照，判断是否需要更新。
如果快照发生变化，更新 Hook 的 memoizedState 并标记 Fiber 已接收到更新。

订阅存储和更新实例

获取存储实例，更新订阅和副作用。
设置 Effect 针对存储变化进行响应，并确保在状态变化时触发更新。

潜在问题与优化策略

在实现 updateSyncExternalStore 时，有一些潜在问题需要注意，并且可以通过优化来增强代码的健壮性和性能。

状态一致性与性能:
- 问题: 多次获取快照如果返回不一致的结果，可能导致意外的多次重渲染。
- 解决方案: 确保 getSnapshot 返回一致的结果，并在开发环境中进行适当的校验和警告。
订阅触发频率:
- 问题: 过于频繁的订阅变更会导致性能问题，增加优化难度。
- 解决方案: 确保订阅逻辑中的依赖项稳定，避免不必要的频繁订阅和取消订阅，并使用适当的防抖或节流技术。

架构图

类图

useSyncExternalStore类图

流程图

下面的流程图展示了 useSyncExternalStore 的运行机制。

时序图

useSyncExternalStore 的具体执行操作。

小结

获取当前 Fiber 和 Hook：在每次挂载或更新时，React 会记录当前正在渲染的 Fiber 节点和对应的 Hook 状态。
获取初始快照或当前快照：根据是否是初次挂载，决定调用 getSnapshot 或 getServerSnapshot 获取状态快照。
检查快照一致性：确保快照在客户端和服务器端的一致性，并避免潜在的无限循环。
存储快照：将获取到的快照存储在 Hook 的 memoizedState 属性中，以便在进一步的 Hook 调用中使用。
订阅存储和设置 Effect：设置 Effect 钩子，以便在存储状态变化时触发组件更新。

React 18 以下版本的 useSyncExternalStore 解析

在 React 18 及更高版本中，useSyncExternalStore 作为一个内置的 Hook 提供，以简化状态同步和订阅逻辑。然而，对于使用 React 17 或更早版本的项目，React 提供了一套 shim 解决方案来模拟这些功能。

目录结构

//packages/use-sync-external-store/src
📦src
 ┣ 📜isServerEnvironment.js         # 检查是否为服务器环境的实现
 ┣ 📜useSyncExternalStore.js        # 主 hook 实现
 ┣ 📜useSyncExternalStoreShim.js       # shim 实现，用于向后兼容
 ┣ 📜useSyncExternalStoreShimClient.js   # 客户端 shim 实现
 ┣ 📜useSyncExternalStoreShimServer.js   # 服务器端 shim 实现
 ┗ 📜useSyncExternalStoreWithSelector.js # 带有选择器的实现

`useSyncExternalStore.js`

import * as React from 'react';

export const useSyncExternalStore = React.useSyncExternalStore;

if (__DEV__) {
  // 避免编译时 `console.error` 语句的问题，这是避免生成的构建工件
  // 访问 React 内部实现不同路径的问题
  console['error'](
    "The main 'use-sync-external-store' entry point is not supported; all it " +
    "does is re-export useSyncExternalStore from the 'react' package, so " +
    'it only works with React 18+.' +
    '\n\n' +
    'If you wish to support React 16 and 17, import from ' +
    "'use-sync-external-store/shim' instead. It will fall back to a shimmed " +
    'implementation when the native one is not available.' +
    '\n\n' +
    "If you only support React 18+, you can import directly from 'react'.",
  );
}

该文件直接 re-export 了 React 18 提供的 useSyncExternalStore 名称空间。
如果项目处于开发模式，给开发者提供警告信息。

`isServerEnvironment.js`

import { canUseDOM } from 'shared/ExecutionEnvironment';

export const isServerEnvironment = !canUseDOM;

isServerEnvironment.js 通过检查 canUseDOM 变量确定当前环境是否为服务器环境。如果不是 DOM 环境（例如服务器环境），isServerEnvironment 将为 true。

`useSyncExternalStore.js`

通过该文件，决定了在不同环境中使用哪种实现。

import {useSyncExternalStore as client} from './useSyncExternalStoreShimClient';
import {useSyncExternalStore as server} from './useSyncExternalStoreShimServer';
import {isServerEnvironment} from './isServerEnvironment';
import {useSyncExternalStore as builtInAPI} from 'react';

const shim = isServerEnvironment ? server : client;

export const useSyncExternalStore: <T>(
  subscribe: (() => void) => () => void,
  getSnapshot: () => T,
  getServerSnapshot?: () => T,
  ) => T = builtInAPI !== undefined ? builtInAPI : shim;

该文件根据环境决定使用内置实现（React 18 及以上）还是 shim 实现（React 17 及以下）。对于 React 18 及以上版本，直接使用内置的 useSyncExternalStore。对于 React 17 及以下版本，依据是否是服务端环境决定使用 server 或 client 版本的 shim。

`useSyncExternalStoreShimClient.js`

这个文件包含了 useSyncExternalStoreShimClient，用于在 React 17 及以下版本中实现 useSyncExternalStore。以下是客户端实现的源码：

import * as React from 'react';
import is from 'shared/objectIs';

const { useState, useEffect, useLayoutEffect, useDebugValue } = React;

let didWarnOld18Alpha = false;
let didWarnUncachedGetSnapshot = false;

export function useSyncExternalStore<T>(
  subscribe: (() => void) => () => void,
  getSnapshot: () => T,
  getServerSnapshot?: () => T,
  ): T {
    if (__DEV__) {
  if (!didWarnOld18Alpha) {
    if (React.startTransition !== undefined) {
      didWarnOld18Alpha = true;
      console['error'](
        'You are using an outdated, pre-release alpha of React 18 that ' +
        'does not support `useSyncExternalStore`. The ' +
        '`use-sync-external-store` shim will not work correctly. Upgrade ' +
        'to a newer pre-release.',
      );
    }
  }
}

const value = getSnapshot(); // 获取当前快照
if (__DEV__) {
  if (!didWarnUncachedGetSnapshot) {
    const cachedValue = getSnapshot();
    if (!is(value, cachedValue)) {
      console['error'](
        'The result of `getSnapshot` should be cached to avoid an infinite loop',
      );
      didWarnUncachedGetSnapshot = true;
    }
  }
}

// 使用 useState 存储当前快照值和 getSnapshot
const [{ inst }, forceUpdate] = useState({ inst: { value, getSnapshot } });

// 处理 Layout Effect 更新状态
useLayoutEffect(() => {
  inst.value = value;  // 设置当前值
  inst.getSnapshot = getSnapshot; // 设置 getSnapshot 函数

  if (checkIfSnapshotChanged(inst)) { // 检查快照是否变化
    forceUpdate({ inst }); // 强制更新
  }
}, [subscribe, value, getSnapshot]);

useEffect(() => {
  if (checkIfSnapshotChanged(inst)) {
    forceUpdate({ inst });
  }
  const handleStoreChange = () => {
    if (checkIfSnapshotChanged(inst)) {
      forceUpdate({ inst });
    }
  };
  return subscribe(handleStoreChange);
}, [subscribe]);

useDebugValue(value);
return value; // 返回当前值
}

function checkIfSnapshotChanged<T>(inst: {
  value: T,
  getSnapshot: () => T,
}): boolean {
  const latestGetSnapshot = inst.getSnapshot;
  const prevValue = inst.value;
  try {
    const nextValue = latestGetSnapshot();
    return !is(prevValue, nextValue); // 比较前后快照
  } catch (error) {
    return true;
  }
}

初始状态和警告检查：在开发模式下，首先会检查是否使用了旧版本的 React 18 alpha，并提示开发者更新。
获取当前快照：调用 getSnapshot 获取当前快照，并在开发环境中进行一致性检查，防止无限循环。
状态存储和更新机制：使用 useState 存储当前快照值和 getSnapshot 函数。
设置 useLayoutEffect 更新订阅和状态：在 useLayoutEffect 中处理状态和订阅的更新逻辑，确保在布局更新时同步状态。
订阅存储变化：在 useEffect 中设置订阅逻辑，确保在状态变化时同步更新组件。
快照检查函数：checkIfSnapshotChanged 函数用于比较当前快照和之前的快照，检测是否发生了变化，如果发生变化则返回 true。

`useSyncExternalStoreShimServer.js`

这是 React 17 及以下版本的服务器端 shim 实现，主要针对 SSR 环境的实现。

export function useSyncExternalStore<T>(
  subscribe: (() => void) => () () () => void,
  getSnapshot: () => T,
  getServerSnapshot?: () => T,
  ): T {
    // 这个 shim 不使用 getServerSnapshot，因为 React 17 及以下版本不支持
    // 方法检测是否正在执行 hydration。shim 的用户需要自行管理
    // 返回从 `getSnapshot` 得到的正确值。
    return getSnapshot();
}

`useSyncExternalStoreWithSelector.js`

React 还提供了一个扩展版本 useSyncExternalStoreWithSelector。这个扩展版本允许通过选择器和比较函数来进一步优化状态管理和更新逻辑。

import * as React from 'react';
import is from 'shared/objectIs';
import { useSyncExternalStore } from 'use-sync-external-store/src/useSyncExternalStore';

// Intentionally not using named imports because Rollup uses dynamic dispatch
// for CommonJS interop.
const { useRef, useEffect, useMemo, useDebugValue } = React;

// Same as useSyncExternalStore, but supports selector and isEqual arguments.
export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
  subscribe: (() => void) => () => void,
  getSnapshot: () => Snapshot,
  getServerSnapshot: void | null | (() => Snapshot),
  selector: (snapshot: Snapshot) => Selection,
  isEqual?: (a: Selection, b: Selection) => boolean,
): Selection {
  // 用于追踪已渲染的快照。
  const instRef = useRef<
    | { hasValue: true, value: Selection }
    | { hasValue: false, value: null }
    | null
  >(null);
  
  let inst;
  if (instRef.current === null) {
    inst = { hasValue: false, value: null };
    instRef.current = inst;
  } else {
    inst = instRef.current;
  }

  const [getSelection, getServerSelection] = useMemo(() => {
    // 使用闭包变量追踪 memoized 状态。
    let hasMemo = false;
    let memoizedSnapshot;
    let memoizedSelection: Selection;
    
    const memoizedSelector = (nextSnapshot: Snapshot) => {
      if (!hasMemo) {
        hasMemo = true;
        memoizedSnapshot = nextSnapshot;
        const nextSelection = selector(nextSnapshot);
        if (isEqual !== undefined && inst.hasValue) {
          const currentSelection = inst.value;
          if (isEqual(currentSelection, nextSelection)) {
            memoizedSelection = currentSelection;
            return currentSelection;
          }
        }
        memoizedSelection = nextSelection;
        return nextSelection;
      }

      const prevSnapshot: Snapshot = memoizedSnapshot as any;
      const prevSelection: Selection = memoizedSelection as any;

      if (is(prevSnapshot, nextSnapshot)) {
        return prevSelection;
      }

      const nextSelection = selector(nextSnapshot);
      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
        memoizedSnapshot = nextSnapshot;
        return prevSelection;
      }

      memoizedSnapshot = nextSnapshot;
      memoizedSelection = nextSelection;
      return nextSelection;
    };
    
    const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
    const getServerSnapshotWithSelector = maybeGetServerSnapshot === null
      ? undefined
      : () => memoizedSelector(maybeGetServerSnapshot());
      
    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
  }, [getSnapshot, getServerSnapshot, selector, isEqual]);

  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);

  useEffect(() => {
    inst.hasValue = true;
    inst.value = value;
  }, [value]);

  useDebugValue(value);
  return value;
}

初始状态管理：使用 useRef 存储渲染时的变更和值。
选择器和 memoization：使用 useMemo 缓存选择器和快照函数，以提升性能并减少重复计算。
获取值和订阅变化：

const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);

useEffect(() => {
  inst.hasValue = true;
  inst.value = value;
}, [value]);

通过 useEffect 和 useDebugValue 管理变化：在 useEffect 中设置状态值，并使用 useDebugValue 进行调试。
返回最终值：return value;

版本间的区别

内置实现的优势与特性（React 18 及以上）

在 React 18 及以上版本中，useSyncExternalStore 作为内置 Hook 提供，有以下显著优势：

性能优化：内置的 useSyncExternalStore 充分利用 React 的内部优化机制，更高效地管理状态变化和组件更新。
简化代码：开发者不再需要手动处理订阅状态和取消订阅逻辑，因为这些操作由 React 内部机制负责。
SSR 支持：适用于服务器端渲染（SSR），无缝获取服务器端快照并同步状态。
并发模式支持：在 React 18 中，useSyncExternalStore 能更好地适应并发模式（Concurrent Mode）。

性能与一致性差异

内置实现：利用 React 内部优化，性能和一致性更优，适用于高频率更新和复杂依赖管理。
shim 实现：基于 useState 和 useEffect 的实现，性能略逊色，特别是在高频更新和复杂场景下表现不佳。

并发模式与 SSR 支持

内置实现：完整支持并发模式和服务器端渲染，保证状态一致性和性能。
shim 实现：对并发模式和 SSR 的支持较为有限，需要手动处理更多细节和边缘情况。

潜在性能问题

在 React 17 及以下版本中，useSyncExternalStore 的 shim 实现中，我们通常使用 useState 和 useEffect 来管理状态。这种方式的关键问题在于：

频繁触发 forceUpdate：每次状态更新时，forceUpdate 都会触发组件的重新渲染。
无法批量更新：由于缺乏 unstable_batchedUpdates，每次更新都是单独的，这会导致多次连续的重新渲染，从而影响性能。

useEffect(() => {
  if (checkIfSnapshotChanged(inst)) {
    forceUpdate({ inst }); // 强制更新，可能频繁触发
  }
  const handleStoreChange = () => {
    if (checkIfSnapshotChanged(inst)) {
      forceUpdate({ inst }); // 每次状态变化都强制更新
    }
  };
  return subscribe(handleStoreChange);
}, [subscribe]);

解决方案

批量更新：在 React 18 中，unstable_batchedUpdates 允许我们批量处理更新，以减少性能开销。然而在 React 17 中，这个特性并不可用。因此我们需要手动管理更新，避免不必要的重新渲染。
减少不必要的重复计算：使用 useMemo 和 useCallback 缓存依赖项和计算结果，以减少不必要的重新计算和渲染。
自定义批处理策略：通过自定义的批处理策略，手动合并多次更新，减少多余的 forceUpdate 调用。

实践建议

通过解析 useSyncExternalStore 源码和对其运行机制的理解，我们不仅学会了如何使用这个 Hook，更重要的是可以从中获得很多提升编程能力和开发高性能前端项目的技巧。

学到了什么

深入了解状态管理工具的原理：
1. 理解状态管理工具（如 Zustand 和 Redux）的核心机制，确保状态的一致性和高效性能。
2. 学习如何高效监听和响应状态变化。
性能优化技巧：
1. 批量更新的策略，减少不必要的重新渲染，提高性能。
2. 使用 useMemo 和 useCallback 缓存依赖管理和计算结果，避免不必要的复杂计算。
编写高效、可维护代码的实践：
1. 理解 Hooks 的调用顺序，确保调用一致性。
2. 通过防御性编程、清晰注释和类型检查，提高代码的健壮性和可维护性。

编程技巧

保持代码简洁和清晰：
1. 简化逻辑：重构和简化复杂的逻辑，确保代码简洁、可读和易于维护。
2. 清晰注释：编写清晰的注释和文档，帮助团队成员理解和维护代码。
模块化和复用：
1. 模块化设计：将功能分解成独立模块，以提升代码的复用性和可维护性。
2. 抽象复用逻辑：将常见的逻辑抽象为复用的 Hooks 或组件，提高代码复用性。
防御性编程：
1. 处理异常：使用适当的异常处理防止意外错误影响应用的运行。
2. 类型检查：通过 TypeScript 或 PropTypes 进行类型检查，提前捕获类型错误。
性能优化：
1. 避免不必要的计算：使用 useMemo 和 useCallback 缓存计算结果和函数，减少不必要的计算和渲染。
2. 精简依赖项：在 useEffect 和其他 Hooks 中精简依赖项，减少因依赖项变化而触发的重新渲染。

设计理念

单一职责原则 (SRP)：
1. 单一职责：每个组件或 Hook 都应专注于一个单一的功能，简化管理和提高可维护性。
开闭原则 (OCP)：
1. 开放扩展，关闭修改：通过扩展实现功能，而不是修改现有代码，提高代码的稳定性和可维护性。
依赖倒置原则 (DIP)：
1. 依赖抽象而非具体实现：使用抽象接口或类型进行依赖管理，提高代码的灵活性和可测试性。
组合优于继承：
1. 组合：通过组合多个独立的组件或 Hooks 实现复杂功能，而不是使用继承，保持代码简单和松耦合。

总结

通过深入了解 useSyncExternalStore 及其在 React 的实现与运行机制，我们可以更高效地管理复杂状态，提升应用的稳定性和性能。

理解内部机制：了解 useSyncExternalStore 和 useSyncExternalStoreWithSelector 的内部实现，帮助更有效地使用这些 Hooks，并避免常见的坑。
优化性能：通过优化选择器函数、使用 useMemo 缓存结果、批量更新等策略，提高应用的性能。
关注最佳实践：在开发过程中遵循最佳实践，如确保 Hooks 调用顺序一致、精简依赖项数组、使用调试工具，减少问题发生，提高开发效率。

前言

状态管理在现代 React 应用中的重要性

React 18 引入 useSyncExternalStore Hook 的背景与动机

回顾 Zustand 源码介绍

useSyncExternalStore解析

useSyncExternalStore简介

初次挂载与更新阶段的不同实现

HooksDispatcherOnMount

HooksDispatcherOnUpdate

mountSyncExternalStore 实现解析

源码解析

运行机制

获取当前 Fiber 和 Hook

获取初始快照

存储初始快照

订阅存储和更新实例

潜在问题与优化策略

updateSyncExternalStore 实现解析

源码解析

运行机制

获取当前 Fiber 和 Hook

获取快照

检查快照变化

订阅存储和更新实例

潜在问题与优化策略

架构图

类图

流程图

时序图

小结

React 18 以下版本的 useSyncExternalStore 解析

目录结构

useSyncExternalStore.js

isServerEnvironment.js

useSyncExternalStore.js

useSyncExternalStoreShimClient.js

useSyncExternalStoreShimServer.js

useSyncExternalStoreWithSelector.js

版本间的区别

内置实现的优势与特性（React 18 及以上）

性能与一致性差异

并发模式与 SSR 支持

潜在性能问题

解决方案

实践建议

学到了什么

编程技巧

设计理念

总结

React 18 引入 `useSyncExternalStore` Hook 的背景与动机

`useSyncExternalStore`解析

`useSyncExternalStore`简介

`HooksDispatcherOnMount`

`HooksDispatcherOnUpdate`

`mountSyncExternalStore` 实现解析

`updateSyncExternalStore` 实现解析

`useSyncExternalStore.js`

`isServerEnvironment.js`

`useSyncExternalStore.js`

`useSyncExternalStoreShimClient.js`

`useSyncExternalStoreShimServer.js`

`useSyncExternalStoreWithSelector.js`