面试题：React中useSyncExternalStore的基本使用场景

适用场景

跨组件状态同步：当多个组件需要共享来自外部源（如自定义事件总线、第三方库状态等）的状态，且该状态变化频率较高，需要即时同步到各个组件时。
优化性能：在传统的React状态管理方式下，一些外部状态变化可能会导致不必要的重新渲染。useSyncExternalStore可以通过精细控制，仅在外部状态实际变化时触发组件更新，从而提升性能。
与非React状态源集成：将React应用与外部状态源（如WebSockets、原生浏览器事件等）集成，确保React组件能够实时反映外部状态的变化。

使用方法（以自定义事件总线为例）

创建自定义事件总线：

const eventBus = {
  events: {},
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);
    }
  },
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
};

使用useSyncExternalStore同步状态：

import { useSyncExternalStore } from'react';

function useCustomEventBusState() {
  const subscribe = callback => {
    eventBus.on('stateChange', callback);
    return () => {
      eventBus.off('stateChange', callback);
    };
  };
  const getSnapshot = () => {
    // 假设事件总线中有一个获取当前状态的方法
    return eventBus.getCurrentState();
  };
  const state = useSyncExternalStore(subscribe, getSnapshot);
  return state;
}

function MyComponent() {
  const state = useCustomEventBusState();
  return (
    <div>
      <p>{JSON.stringify(state)}</p>
    </div>
  );
}

在上述代码中：

subscribe函数用于注册事件总线的订阅，返回的函数用于取消订阅。
getSnapshot函数用于获取当前外部状态的快照。
useSyncExternalStore通过传入subscribe和getSnapshot来同步外部状态，并返回当前状态供组件使用。

星途面试题库

面试题：React中useSyncExternalStore的基本使用场景

知识考点

面试题答案

适用场景

使用方法（以自定义事件总线为例）