如何实现React与纯JS类服务的数据同步？现有方案是否可行？

API 探路者

2026-7-2

问题描述

我想在React里用refs引用类服务，现在遇到React和服务的数据更新不同步的问题。我想到的解决办法是，服务每次更新数据后调用一个update函数，触发使用该上下文的React组件重新渲染。这个方案基本能用，就算是memo包裹的组件也能正常工作，但我不确定有没有没考虑到的问题。我希望能无异常地用这个方案实现全应用实时数据更新，想确认这个方案是否正确、会不会引发意外错误，同时想知道有没有更优的实现方式。

class ValuesService {
    private values: string[]
    private update: () => void

    constructor({update}) {
      this.values = []
      this.update = update
    }

    setValues(values: string[]) {
      this.values = values
      this.update()
    }

    getValues() {
      return this.values
    }

  }

  const Context = createContext()

  function ExampleProvider({children}) {
    const [time, setTime] = useState(new Date());

    const update = () => {
      setTime(new Date());
    };

    const { current: values } = useRef(new ValuesService({ update }));
    
    return (
      <Context.Provider value={{time, values}}>{children}</Context.Provider>
    )
  }

解答

你的方案是否正确？

这个方案整体是可行的，核心思路是通过一个无意义的state（time）变化触发组件重渲染，让上下文消费者能获取到服务里最新的数据。memo组件能正常工作，是因为你把time放进了上下文value里——只要上下文value变化，memo组件就算依赖的是服务实例，也会因为上下文更新而重新渲染，这点没问题。

但要注意几个潜在问题：

不必要的重渲染范围：所有消费这个上下文的组件都会因为time变化而重渲染，哪怕它根本不需要用到服务里的数据。如果上下文层级很高（比如根组件），全应用范围的无差别重渲染可能会影响性能。
服务实例的生命周期：用useRef创建的服务实例会在组件挂载时初始化一次，之后不会重新创建。但如果update函数依赖的变量有变化（比如后续加了其他state），update里的闭包可能会过时，导致逻辑出错。比如如果以后你在update里用到其他state，当前的写法会捕获到初始的state值，引发bug。
数据不可变性问题：你的setValues直接替换了this.values的引用，但如果服务里有修改数组内部元素的方法（比如push），而不是直接替换整个数组，那么就算调用了update，组件拿到的数组引用还是原来的，memo组件可能因为浅比较认为数据没变化而不更新——当然你当前的代码里只有setValues，暂时没这个问题，但扩展时要注意。

更优的实现方式

1. 把服务数据和React State绑定

直接把服务里的values放进React state，让React自己管理数据的更新，这样不需要手动触发重渲染，也能保证数据同步：

const Context = createContext();

function ExampleProvider({ children }) {
  const [values, setValues] = useState<string[]>([]);

  const valuesService = useMemo(() => ({
    setValues: (newValues: string[]) => setValues(newValues),
    getValues: () => values
  }), [values]);

  return (
    <Context.Provider value={valuesService}>{children}</Context.Provider>
  );
}

这种方式利用React的state自动触发重渲染，避免了手动维护update函数，也不会有闭包过时的问题。而且只有当values真正变化时，组件才会重渲染，性能更优。

2. 用自定义Hook封装服务和状态

如果你的服务有复杂的业务逻辑，不想把逻辑都写在Provider里，可以用自定义Hook把服务和状态结合：

class ValuesService {
  private onUpdate: (values: string[]) => void;
  private values: string[] = [];

  constructor(onUpdate: (values: string[]) => void) {
    this.onUpdate = onUpdate;
  }

  setValues(values: string[]) {
    this.values = values;
    this.onUpdate(values);
  }

  getValues() {
    return this.values;
  }

  // 示例：添加复杂业务方法
  addValue(value: string) {
    this.values = [...this.values, value];
    this.onUpdate(this.values);
  }
}

function useValuesService() {
  const [values, setValues] = useState<string[]>([]);
  const serviceRef = useRef<ValuesService | null>(null);

  if (!serviceRef.current) {
    serviceRef.current = new ValuesService(setValues);
  }

  return {
    service: serviceRef.current,
    values
  };
}

// 在Provider中提供
const Context = createContext<ReturnType<typeof useValuesService> | null>(null);

function ExampleProvider({ children }) {
  const valuesService = useValuesService();
  return (
    <Context.Provider value={valuesService}>{children}</Context.Provider>
  );
}

这种方式既保留了类服务的封装性，又让React通过state管理数据更新，组件可以直接消费values，memo组件也能通过依赖values来精准重渲染，避免不必要的更新。

3. 使用状态管理库简化逻辑

如果你的服务涉及异步数据（比如API请求），或者需要跨组件共享复杂状态，React Query、Zustand这类库会更省心——它们内置了数据同步、缓存、自动重渲染的逻辑，不用自己手动维护更新机制。比如用Zustand：

import { create } from 'zustand';

interface ValuesState {
  values: string[];
  setValues: (values: string[]) => void;
  addValue: (value: string) => void;
}

const useValuesStore = create<ValuesState>((set) => ({
  values: [],
  setValues: (values) => set({ values }),
  addValue: (value) => set((state) => ({ values: [...state.values, value] }))
}));

组件直接用useValuesStore获取数据和方法，自动同步更新，完全不用手动处理重渲染问题。

内容的提问来源于stack exchange，提问作者Damian