如何在React.js应用中基于React Context实现上下文数据更新的正确模拟

我需要开发一个带有内部“模拟器（simulator）”的ReactJS应用，用于实现频繁的数据更新。该应用需模拟多个实体（如车辆）的状态与位置更新并展示，长期数据将来自后端，但当前仅需实现前端部分。模拟逻辑较为复杂，需频繁迭代更新。

UI几乎无法控制数据，99%的数据更新来自模拟器内部，UI组件需实时反映数据当前状态，无需在应用关闭后持久化数据。

我初步用React Context实现了一个方案：

import React, { useState, useEffect } from 'react';

const MyContext = React.createContext({
  mydata: []
});

export const MyContextProvider = () => {
    const [myData, setMyData] = useState([]);
    
    useEffect(() => {
        const timer = setInterval(() => {
                // Here do the next simulation step and 
                // call 'setMyData' to update
            }
        }, 1000);
        return () => clearInterval(timer);
  }, [myData]);
  
  return (
    <MyContext.Provider
      value={{
        myData: myData
      }}
    >
      {props.children}
    </MyContext.Provider>
  );
}

export default MyContext;

// In index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <MyContextProvider>
    <App />
  </MyContextProvider>
);

但这个方案把上下文更新逻辑和组件绑定了，我认为模拟逻辑应该是独立的“服务（service）”，二者仅因更新上下文的需求产生关联，希望得到更优的实现方案建议。

1. 抽离独立的模拟器服务 #

把模拟逻辑完全从React组件中剥离，做成独立模块，负责管理实体状态、运行模拟循环，并通过订阅模式通知数据更新。

示例代码：

// simulatorService.js
class SimulatorService {
  constructor() {
    this.entities = [];
    this.subscribers = [];
    this.intervalId = null;
    this.isRunning = false;
  }

  // 初始化模拟实体
  initEntities(initialEntities) {
    this.entities = [...initialEntities];
  }

  // 模拟单次更新逻辑
  simulateStep() {
    // 这里实现复杂的状态更新逻辑，比如车辆位置移动、状态变化
    this.entities = this.entities.map(entity => ({
      ...entity,
      position: {
        x: entity.position.x + Math.random() * 2 - 1,
        y: entity.position.y + Math.random() * 2 - 1
      },
      status: Math.random() > 0.9 ? 'alert' : 'normal'
    }));
    // 通知所有订阅者
    this.notifySubscribers();
  }

  // 启动模拟循环
  start(frequency = 1000) {
    if (this.isRunning) return;
    this.isRunning = true;
    this.intervalId = setInterval(() => {
      this.simulateStep();
    }, frequency);
  }

  // 停止模拟
  stop() {
    if (!this.isRunning) return;
    this.isRunning = false;
    clearInterval(this.intervalId);
  }

  // 订阅数据更新
  subscribe(callback) {
    this.subscribers.push(callback);
    // 立即返回当前数据
    callback(this.entities);
    // 返回取消订阅的函数
    return () => {
      this.subscribers = this.subscribers.filter(sub => sub !== callback);
    };
  }

  // 通知所有订阅者
  notifySubscribers() {
    this.subscribers.forEach(callback => callback(this.entities));
  }
}

// 导出单例实例
export const simulatorService = new SimulatorService();

2. 用Context连接服务与UI #

修改Context Provider，不再包含模拟逻辑，而是订阅模拟器服务的更新，同步到React状态中：

// MyContext.js
import React, { useState, useEffect } from 'react';
import { simulatorService } from './simulatorService';

const MyContext = React.createContext({
  entities: [],
  startSimulation: () => {},
  stopSimulation: () => {}
});

export const MyContextProvider = ({ children }) => {
  const [entities, setEntities] = useState([]);

  useEffect(() => {
    // 初始化模拟实体（可根据需求调整初始数据）
    const initialEntities = Array.from({ length: 10 }, (_, idx) => ({
      id: idx,
      position: { x: 0, y: 0 },
      status: 'normal',
      type: 'vehicle'
    }));
    simulatorService.initEntities(initialEntities);

    // 订阅模拟器更新
    const unsubscribe = simulatorService.subscribe(newEntities => {
      setEntities(newEntities);
    });

    // 组件卸载时取消订阅并停止模拟
    return () => {
      unsubscribe();
      simulatorService.stop();
    };
  }, []);

  const startSimulation = () => simulatorService.start();
  const stopSimulation = () => simulatorService.stop();

  return (
    <MyContext.Provider
      value={{
        entities,
        startSimulation,
        stopSimulation
      }}
    >
      {children}
    </MyContext.Provider>
  );
}

export default MyContext;

3. UI组件使用Context数据 #

在需要展示数据的组件中，直接从Context获取数据即可：

// VehicleList.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const VehicleList = () => {
  const { entities } = useContext(MyContext);

  return (
    <div className="vehicle-list">
      {entities.map(vehicle => (
        <div key={vehicle.id} className={`vehicle-item ${vehicle.status}`}>
          <p>ID: {vehicle.id}</p>
          <p>位置: ({vehicle.position.x.toFixed(2)}, {vehicle.position.y.toFixed(2)})</p>
          <p>状态: {vehicle.status}</p>
        </div>
      ))}
    </div>
  );
};

export default VehicleList;

方案优势 #

• 关注点分离：模拟逻辑完全独立于React组件，便于单独测试、迭代和维护，后续对接后端时只需替换服务层逻辑即可。
• 灵活的订阅机制：除了React组件，其他非UI模块也可以订阅模拟器数据（如果需要）。
• 避免不必要的重渲染：模拟器只在数据变化时通知订阅者，结合React的状态更新机制，确保UI仅在数据变化时重渲染。
• 易于控制模拟生命周期：可以在任意组件中调用startSimulation/stopSimulation控制模拟的启停，无需依赖Provider组件的生命周期。

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