基于MongoDB+React的合成变量实时计算方案技术问询

1. 合成变量创建：安全高效的实时计算 #

绝对不要用原生eval()执行用户定义的表达式，避免XSS和代码注入风险，推荐使用math.js这类安全的表达式解析库，它支持自定义变量绑定，能安全处理各类算术运算。

核心实现步骤： #

• 安装依赖：npm install mathjs
• 前端用useRef缓存实时变量的最新值（避免频繁触发组件重渲染）
• 解析用户表达式并绑定变量后计算：

import { evaluate } from 'mathjs';

// 示例：用户配置的表达式与选中变量
const userExpression = '((power-1 + power-2) * 100) / 1000';
const selectedVars = ['power-1', 'power-2'];
// 实时变量值映射表（从后端推送更新）
const variableValues = useRef({
  "power-1": 98.2,
  "power-2": 23.5
});

// 构建变量作用域，绑定实时值
const scope = selectedVars.reduce((acc, varName) => {
  acc[varName] = variableValues.current[varName];
  return acc;
}, {});

// 安全计算合成变量值
const computedValue = evaluate(userExpression, scope);

如果不想引入第三方库，也可以自己实现轻量表达式解析（仅支持基础算术），比如拆分运算符与变量、替换变量值后计算，但复杂场景优先用成熟库。

2. React前端集成：实时更新与性能优化 #

实时更新机制 #

• 用useState存储合成变量的最终计算结果，useRef缓存原始变量的实时值（减少重渲染触发）
• 后端通过WebSocket（双向通信）或Server-Sent Events（单向）推送10秒一次的设备数据，前端监听消息并更新变量值
• 用useEffect绑定WebSocket连接，用useMemo缓存计算逻辑，仅当表达式或变量值变化时重新计算：

import { useState, useEffect, useRef, useMemo } from 'react';
import { evaluate } from 'mathjs';

function SyntheticVariablePanel() {
  const [syntheticValue, setSyntheticValue] = useState(0);
  const variableValues = useRef({});
  const [userExpression, setUserExpression] = useState('((power-1 + power-2) * 100) / 1000');
  const [selectedVars, setSelectedVars] = useState(['power-1', 'power-2']);

  // 建立WebSocket连接，监听设备数据推送
  useEffect(() => {
    const ws = new WebSocket('ws://your-backend/ws/device-data');
    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      // 批量更新变量值
      Object.assign(variableValues.current, newData);
      // 触发合成变量计算
      updateSyntheticValue();
    };
    return () => ws.close();
  }, []);

  // 缓存计算逻辑，仅依赖表达式和选中变量变化
  const updateSyntheticValue = useMemo(() => () => {
    const scope = {};
    selectedVars.forEach(varName => {
      scope[varName] = variableValues.current[varName] ?? 0;
    });
    try {
      const value = evaluate(userExpression, scope);
      setSyntheticValue(value.toFixed(2));
    } catch (err) {
      setSyntheticValue('表达式格式错误');
    }
  }, [userExpression, selectedVars]);

  return (
    <div className="synthetic-panel">
      <input 
        type="text" 
        value={userExpression} 
        onChange={(e) => setUserExpression(e.target.value)}
        placeholder="输入算术表达式"
      />
      <div className="value-display">合成变量值：{syntheticValue}</div>
    </div>
  );
}

性能优化要点 #

• 用React.memo包裹子组件，避免无关更新触发重渲染
• 批量更新变量值，避免单个变量更新就触发计算
• 合成变量计算结果用toFixed控制精度，减少不必要的状态变更

3. 动态变量变更处理：同步后端与前端 #

后端监听MongoDB变量集合变更 #

Node.js后端利用MongoDB的Change Streams监听Variables集合的增删改操作，一旦有变更立即推送到前端：

const { MongoClient } = require('mongodb');

async function watchVariableChanges() {
  const client = new MongoClient('mongodb://your-mongo-url');
  await client.connect();
  const db = client.db('your-db-name');
  const variablesCollection = db.collection('variables');

  // 监听集合变更事件
  const changeStream = variablesCollection.watch();
  changeStream.on('change', (change) => {
    // 封装变更信息
    const changeInfo = {
      opType: change.operationType,
      data: change.fullDocument || change.documentKey
    };
    // 推送给所有在线WebSocket客户端（需维护连接池）
    global.wsConnections.forEach(conn => {
      if (conn.readyState === WebSocket.OPEN) {
        conn.send(JSON.stringify({ type: 'variable-update', payload: changeInfo }));
      }
    });
  });
}

前端处理变量变更 #

• 前端WebSocket监听变量变更消息，更新本地变量列表（用于用户选择的下拉选项）
• 自动检查合成变量的依赖是否有效，若依赖变量被删除则提示用户：

// 在WebSocket消息处理逻辑中添加变量变更分支
ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  if (message.type === 'variable-update') {
    const { opType, data } = message.payload;
    // 更新本地变量列表
    setVariableList(prev => {
      if (opType === 'insert') return [...prev, data];
      if (opType === 'delete') return prev.filter(v => v._id !== data._id);
      return prev.map(v => v._id === data._id ? data : v);
    });
    // 检查合成变量依赖的变量是否存在
    const invalidVars = selectedVars.filter(varName => 
      !variableList.some(v => v.name === varName)
    );
    if (invalidVars.length > 0) {
      alert(`合成变量依赖的${invalidVars.join(',')}已被删除，请重新配置`);
      setSelectedVars(prev => prev.filter(v => !invalidVars.includes(v)));
    }
  } else {
    // 处理设备数据更新逻辑
    Object.assign(variableValues.current, message.payload);
    updateSyntheticValue();
  }
};

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