[React 进阶系列] useSyncExternalStore hook

前情提要，包括 yup 的实现在这里：yup 基础使用以及 jest 测试

简单的提一下，需要实现的功能是：

• yup schema 需要访问外部的 storage
• 外部的 storage 是可变的
• React 内部也需要访问同样的 storage

基于这几个前提条件，再加上我们的项目已经从 React 17 升级到了 React 18，因此就比较顺利的找到了一个新的 hook：useSyncExternalStore

这个新的 hook 可以监听到 React 外部 store——通常情况下可以是 local storage/session storage 这种——的变化，随后在 React 组件内部去更新对应的状态

官方文档其实解释的比较清楚了，使用 useSyncExternalStore 监听的 store 必须要实现以下两个功能：

• subscribe

  其作用是一个 subscriber，主要提供的功能在，当变化被监听到时，就会调用当前的 subscriber

  我个人理解，相比于传统的 Consumer/Subscriber 模式，React 提供的这个 hook 是一个弱化的版本，subscriber 的主要目的是为了提示 React 这里有一个状态变化，所以很多情况下还是需要开发手动在 useEffect 中实现对应的功能

  当然，也是可以通过 event emitter 去出发 subscriber 的变化，这点还需要研究一下怎么实现

• getSnapshot

  这个是会被返回的最新状态

这也是 useSyncExternalStore 必须的两个参数。另一参数是为初始状态，为可选项：

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

实现 store

import { useSyncExternalStore } from "react";

export class PrerequisiteStore {
  private prerequisite: string | undefined;
  private listeners: Set<() => void> = new Set();
  private initListeners: Set<() => void> = new Set();
  private isInitialized = false;

  subscribe(listener: () => void) {
    this.listeners.add(listener);
    return () => {
      this.listeners.delete(listener);
    };
  }

  getSnapshot() {
    return this.prerequisite;
  }

  setPrerequisite(prerequisite: string | undefined) {
    this.prerequisite = prerequisite;
    this.isInitialized = true;
    this.listeners.forEach((listener) => listener());
    this.initListeners.forEach((listener) => listener());
    this.initListeners.clear();
  }

  onInitialized(cb: () => void) {
    if (this.isInitialized) {
      cb();
    } else {
      this.initListeners.add(cb);
    }
  }
}

const prerequisteStore = new PrerequisiteStore();

export const getPrerequisite = () => prerequisteStore.getSnapshot();
export const setPrerequisite = (prerequisite: undefined | string) =>
  prerequisteStore.setPrerequisite(prerequisite);

const subscribe = (cb: () => void) => prerequisteStore.subscribe(cb);
const getSnapshot = () => prerequisteStore.getSnapshot();
const getPrerequisiteSnapshot = getSnapshot;

export const onPrerequisiteStoreInitialized = (cb: () => void) =>
  prerequisteStore.onInitialized(cb);

export const usePrerequisiteSyncStore = () => {
  return useSyncExternalStore(subscribe, getSnapshot, getPrerequisiteSnapshot);
};

这个实现方法是用 class……其主要原因是想要基于一个 singleton 实现，这样全局访问 prerequisteStore 的时候只能访问这一个 store

不过同样的问题似乎也可以使用 object 来解决，就像 React 官方文档实现的那样：

// This is an example of a third-party store
// that you might need to integrate with React.

// If your app is fully built with React,
// we recommend using React state instead.

let nextId = 0;
let todos = [{ id: nextId++, text: "Todo #1" }];
let listeners = [];

export const todosStore = {
  addTodo() {
    todos = [...todos, { id: nextId++, text: "Todo #" + nextId }];
    emitChange();
  },
  subscribe(listener) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot() {
    return todos;
  },
};

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

而且目前的实现实际上是无法自由绑定 listener 的，所以之后可能会修改一下这部分，而且还是需要花点时间琢磨一下 subscribe 这个功能怎么用

使用 store

错误实现

useEffect(() => {
  setTimeout(() => {
    setPrerequisite("A");
    initDemoSchema();
  }, 1000);
  setTimeout(() => {
    setPrerequisite("C");
  }, 2000);
}, []);

useEffect(() => {
  console.log(prerequisiteStore, new Date().toISOString());
  if (prerequisiteStore) {
    const res = demoSchema.cast({});
    demoSchema
      .validate(res)
      .then((res) => console.log(res))
      .catch((e) => {
        if (e instanceof ValidationError) {
          console.log(e.path, ",", e.message);
        }
      });
  }
}, [prerequisiteStore]);

这是 App.tsx 中的变化，实现效果如下：

这里可以看到有个问题，那就是在 useEffect(() => {}, [prerequisiteStore]) 获取变化的时候，第一个 useEffect 没有获取更新的状态

修正

首先 store 的初始化，在当前的版本不是非常的必须，所以这里可以省略掉，直接保留 subscribe 等即可……不过因为测试代码已经添加了的关系，这里不会继续修改。主要就是修改一下 initDemoSchema:

// 重命名
export const updateDemoSchema = (prerequisite: string | undefined) => {
  if (prerequisite) {
    demoSchema = demoSchema.shape({
      enumField: string()
        .required()
        .default(prerequisite)
        .oneOf(Object.keys(getTestEnum() || [])),
    });
  }
};

随后在 App.tsx 中更新：

useEffect(() => {
  setTimeout(() => {
    setPrerequisite("A");
  }, 1000);
  setTimeout(() => {
    setPrerequisite("C");
  }, 2000);
}, []);

useEffect(() => {
  console.log(prerequisiteStore, new Date().toISOString());
  if (prerequisiteStore) {
    updateDemoSchema(prerequisiteStore);
    const res = demoSchema.cast({});
    demoSchema
      .validate(res)
      .then((res) => console.log(res))
      .catch((e) => {
        if (e instanceof ValidationError) {
          console.log(e.path, ",", e.message);
        }
      });
  }
}, [prerequisiteStore]);

这样就可以实现正常更新了：

补充：发现之前没有写 initDemoSchema，之前旧的实现大致上没有特别大的区别，不过 prerequisite 的方式是通过 getPrerequisite 获取的。但是我没注意到的是，这只是一个 reference，同时也没有绑定 subscribe，因此这里返回的永远是最初值，也就是在 initialized 后的值，也就是 A

下一步

下一步想做的就是把 schema 的变化抽离出来，并且尝试使用 todo 案例中的 emitChange，这样 schema 的变化就不局限在 component 层级

虽然目前的业务情况来说，1 个 schema 基本上只会被用在 1 个页面上，不过还是想要将其剥离出来，减少对 react 组建的依赖性，而是直接想办法监听 store 的变化

测试代码

这个测试代码写的就比较含糊，基本上就是测试了一下 subscriber 被调用了几次

相对而言比较复杂的实现功能还是得回到 yup schema 去做……这等到实际上有这个需求再说吧，感觉那个写起来太痛苦了

import { PrerequisiteStore } from "../store/prerequisiteStore";

describe("PrerequisiteStore", () => {
  let store: PrerequisiteStore;

  beforeEach(() => {
    store = new PrerequisiteStore();
  });

  test("should subscribe and unsubscribe listeners", () => {
    const listener = jest.fn();

    const unsubscribe = store.subscribe(listener);
    store.setPrerequisite("test");
    expect(listener).toHaveBeenCalledTimes(1);

    // 这里注意每个 subscribe 会返回的那个函数
    // 调用后就会 unsubscribe 当前行为
    unsubscribe();
    store.setPrerequisite("new test");
    expect(listener).toHaveBeenCalledTimes(1);
  });

  test("should return the current state with getSnapshot", () => {
    expect(store.getSnapshot()).toBeUndefined();

    store.setPrerequisite("test");
    expect(store.getSnapshot()).toBe("test");
  });

  test("should notify listeners when state changes", () => {
    const listener1 = jest.fn();
    const listener2 = jest.fn();

    store.subscribe(listener1);
    store.subscribe(listener2);

    store.setPrerequisite("test");

    expect(listener1).toHaveBeenCalledTimes(1);
    expect(listener2).toHaveBeenCalledTimes(1);
  });

  test("should handle initialization correctly", () => {
    const initListener = jest.fn();
    store.onInitialized(initListener);

    store.setPrerequisite("test");
    expect(initListener).toHaveBeenCalledTimes(1);

    const anotherInitListener = jest.fn();
    store.onInitialized(anotherInitListener);
    expect(anotherInitListener).toHaveBeenCalledTimes(1);
  });

  test("should clear initListeners after initialization", () => {
    const initListener = jest.fn();
    store.onInitialized(initListener);

    store.setPrerequisite("test");
    expect(initListener).toHaveBeenCalledTimes(1);

    store.setPrerequisite("new test");
    expect(initListener).toHaveBeenCalledTimes(1);
  });

  test("should handle multiple initialization listeners correctly", () => {
    const initListener1 = jest.fn();
    const initListener2 = jest.fn();

    store.onInitialized(initListener1);
    store.onInitialized(initListener2);

    store.setPrerequisite("test");
    expect(initListener1).toHaveBeenCalledTimes(1);
    expect(initListener2).toHaveBeenCalledTimes(1);
  });
});

---

event emitter

这里新增一下 event emitter 的实现：

class EventEmitter {
  private events: { [key: string]: Set<Function> } = {};

  on(event: string, listener: Function) {
    if (!this.events[event]) {
      this.events[event] = new Set();
    }
    this.events[event].add(listener);
  }

  off(event: string, listener: Function) {
    if (!this.events[event]) return;
    this.events[event].delete(listener);
  }

  emit(event: string, ...args: any[]) {
    if (!this.events[event]) return;
    for (const listener of this.events[event]) {
      listener(...args);
    }
  }
}

const eventEmitter = new EventEmitter();
export default eventEmitter;

调用方法也很简单，在 schema 中实现：

eventEmitter.on("prerequisiteChange", updateDemoSchema);

app 中更新代码如下：

useEffect(() => {
  console.log(
    "Prerequisite Store changed:",
    prerequisiteStore,
    new Date().toISOString()
  );
  if (prerequisiteStore) {
    const res = demoSchema.cast({});
    demoSchema
      .validate(res)
      .then((validatedRes) => console.log(validatedRes))
      .catch((e: ValidationError) => {
        console.log("Validation error:", e.path, e.message);
      });
  }
}, [prerequisiteStore]);

这样就可以有效的剥离 data schema 和 react component 之间的关系，而是通过事件触发进行正常的更新

最后渲染结果如下：

有的时候就不得不感叹 React 和 Angular 越到后面越有种……天下文章一大抄的感觉……

比如说这是之前学习 Angular 的 EventEmitter 的使用：

export class CockpitComponent {
  @Output() serverCreated = new EventEmitter<Omit<ServerElement, "type">>();
  @Output() blueprintCreated = new EventEmitter<Omit<ServerElement, "type">>();
  newServerName = "";
  newServerContent = "";

  onAddServer() {
    this.serverCreated.emit({
      name: this.newServerName,
      content: this.newServerContent,
    });
  }

  onAddBlueprint() {
    this.blueprintCreated.emit({
      name: this.newServerName,
      content: this.newServerContent,
    });
  }
}

学了一下 Angular 还真有助于理解 18 这个新 hook 的运用和延伸……

我感觉下意识的选择 class 可能也是受到了一点 Angular 的影响……