useSyncExternalStore 的应用

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：修能

学而不思则罔，思而不学则殆 。 --- 《论语·为政》

What

useSyncExternalStore is a React Hook that lets you subscribe to an external store.

useSyncExternalStore 是一个支持让用户订阅外部存储的 Hook。官方文档

---

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

---

Why

首先，我们这里基于 molecule1.x 的版本抽象了一个简易版的 mini-molecule。

import { EventBus } from "../utils";

type Item = { key: string };
// 声明一个事件订阅
const eventBus = new EventBus();
// 声明模块数据类型
class Model {
  constructor(public data: Item[] = [], public current?: string) {}
}

export class Service {
  protected state: Model;
  constructor() {
    this.state = new Model();
  }

  setState(nextState: Partial<Model>) {
    this.state = { ...this.state, ...nextState };
    this.render(this.state);
  }

  private render(state: Model) {
    eventBus.emit("render", state);
  }
}

export default function Home() {
  const state = useExternal();
  if (!state) return <div>loading...</div>;
  return (
    <>
      <strong>{state.current || "empty"}</strong>
      <ul>
        {state.data.map((i) => (
          <li key={i.key}>{i.key}</li>
        ))}
      </ul>
    </>
  );
}

const service = new Service();
function useExternal() {
  const [state, setState] = useState<Model | undefined>(undefined);

  useEffect(() => {
    setState(service.getState());
    service.onUpdateState((next) => {
      setState(next);
    });
  }, []);

  return state;
}

如上面代码所示，已经实现了从外部存储获取相关数据，并且监听外部数据的更新，并触发函数组件的更新。

接下来实现更新外部数据的操作。

export default function Home() {
  const state = useExternal();
  if (!state) return <div>loading...</div>;
  return (
    <>
      <ul>
        {state.data.map((i) => (
          <li key={i.key}>{i.key}</li>
        ))}
      </ul>
+      <button onClick={() => service.insert(`${new Date().valueOf()}`)}>
+        add list
+      </button>
    </>
  );
}

其实要做的比较简单，就是增加了一个触发的按钮去修改数据即可。

---

上述这种比较简单的场景下所支持的 useExternal 写起来也是比较简单的。当你的场景越发复杂，你所需要考虑的就越多。就会导致项目的复杂度越来越高。而此时，如果有一个官方出品，有 React 团队做背书的 API 则会舒服很多。

以下是 useSyncExternlaStore 的 shim 版本相关代码：

function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
                              // React do not expose a way to check if we're hydrating. So users of the shim
                              // will need to track that themselves and return the correct value
                              // from `getSnapshot`.
                              getServerSnapshot) {
  {
    if (!didWarnOld18Alpha) {
      if (React.startTransition !== undefined) {
        didWarnOld18Alpha = true;

        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.');
      }
    }
  } // Read the current snapshot from the store on every render. Again, this
  // breaks the rules of React, and only works here because of specific
  // implementation details, most importantly that updates are
  // always synchronous.

  var value = getSnapshot();

  {
    if (!didWarnUncachedGetSnapshot) {
      var cachedValue = getSnapshot();

      if (!objectIs(value, cachedValue)) {
        error('The result of getSnapshot should be cached to avoid an infinite loop');

        didWarnUncachedGetSnapshot = true;
      }
    }
  } // Because updates are synchronous, we don't queue them. Instead we force a
  // re-render whenever the subscribed state changes by updating an some
  // arbitrary useState hook. Then, during render, we call getSnapshot to read
  // the current value.
  //
  // Because we don't actually use the state returned by the useState hook, we
  // can save a bit of memory by storing other stuff in that slot.
  //
  // To implement the early bailout, we need to track some things on a mutable
  // object. Usually, we would put that in a useRef hook, but we can stash it in
  // our useState hook instead.
  //
  // To force a re-render, we call forceUpdate({inst}). That works because the
  // new object always fails an equality check.

  var _useState = useState({
    inst: {
      value: value,
      getSnapshot: getSnapshot
    }
  }),
    inst = _useState[0].inst,
    forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
  // in the layout phase so we can access it during the tearing check that
  // happens on subscribe.

  useLayoutEffect(function () {
    inst.value = value;
    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
    // commit phase if there was an interleaved mutation. In concurrent mode
    // this can happen all the time, but even in synchronous mode, an earlier
    // effect may have mutated the store.

    if (checkIfSnapshotChanged(inst)) {
      // Force a re-render.
      forceUpdate({
        inst: inst
      });
    }
  }, [subscribe, value, getSnapshot]);
  useEffect(function () {
    // Check for changes right before subscribing. Subsequent changes will be
    // detected in the subscription handler.
    if (checkIfSnapshotChanged(inst)) {
      // Force a re-render.
      forceUpdate({
        inst: inst
      });
    }

    var handleStoreChange = function () {
      // TODO: Because there is no cross-renderer API for batching updates, it's
      // up to the consumer of this library to wrap their subscription event
      // with unstable_batchedUpdates. Should we try to detect when this isn't
      // the case and print a warning in development?
      // The store changed. Check if the snapshot changed since the last time we
      // read from the store.
      if (checkIfSnapshotChanged(inst)) {
        // Force a re-render.
        forceUpdate({
          inst: inst
        });
      }
    }; // Subscribe to the store and return a clean-up function.

    return subscribe(handleStoreChange);
  }, [subscribe]);
  useDebugValue(value);
  return value;
}

How

针对上述例子进行改造

const service = new Service();

export default function Home() {
  const state = useSyncExternalStore(
    (cb) => () => service.onUpdateState(cb),
    service.getState.bind(service)
  );

  if (!state) return <div>loading...</div>;
  return (
    <>
      <ul>
        {state.data.map((i) => (
          <li key={i.key}>{i.key}</li>
        ))}
      </ul>
      <button onClick={() => service.insert(`${new Date().valueOf()}`)}>
        add list
      </button>
    </>
  );
}

---

在 Molecule 中使用

import { useContext, useMemo } from 'react';
import type { IMoleculeContext } from 'mo/types';
import { useSyncExternalStore } from 'use-sync-external-store/shim';

import { Context } from '../context';

type Selector = keyof IMoleculeContext;
type StateType<T extends keyof IMoleculeContext> = ReturnType<IMoleculeContext[T]['getState']>;

export default function useConnector<T extends Selector>(selector: T) {
    const { molecule } = useContext(Context);
    const target = useMemo(() => molecule[selector], [molecule]);
    const subscribe = useMemo(() => {
        return (notify: () => void) => {
            target.onUpdateState(notify);
            return () => target.removeOnUpdateState(notify);
        };
    }, []);
    return useSyncExternalStore(subscribe, () => target.getState()) as StateType<T>;
}

最后

欢迎关注【袋鼠云数栈UED团队】~

袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

• 大数据分布式任务调度系统——Taier
• 轻量级的 Web IDE UI 框架——Molecule
• 针对大数据领域的 SQL Parser 项目——dt-sql-parser
• 袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
• 一个速度更快、配置更灵活、使用更简单的模块打包器——ko
• 一个针对 antd 的组件测试工具库——ant-design-testing