如何在React js/Solidity中检测变量变化并触发弹窗提示？

核心实现思路 #

• 用useRef存储上一次的数值作为对比基准，ref的更新不会触发组件重渲染，性能开销极低
• 用useEffect监听当前动态数值的变化，每次数值更新时和ref里存储的旧值对比，自动判断上升/下降状态
• 弹窗可以直接用原生alert，也可以直接复用项目现有UI组件库的通知组件，不需要额外写轮询检测逻辑，依赖React的响应式更新机制即可自动触发回调

完整代码示例 #

import { useState, useEffect, useRef } from 'react';
// 示例用antd通知组件，不需要可直接替换为alert
import { notification } from 'antd';

const DynamicValueWatcher = () => {
  // 此处替换为你实际项目中定时变动的数值，支持从Redux/Zustand等全局状态直接引入
  const [dynamicValue, setDynamicValue] = useState(0);
  // 存储上一次数值用于对比，不会触发组件重渲染
  const prevValueRef = useRef(dynamicValue);

  // 模拟数值定时更新逻辑，实际场景替换为你自己的数值更新逻辑（比如接口拉取更新）即可
  useEffect(() => {
    const updateTimer = setInterval(() => {
      // 模拟随机涨跌
      setDynamicValue(prev => prev + (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 10));
    }, 3 * 60 * 1000); // 3分钟更新一次，可自行修改间隔时长
    return () => clearInterval(updateTimer);
  }, []);

  // 数值变化监听逻辑
  useEffect(() => {
    // 首次渲染跳过弹窗
    if (dynamicValue === prevValueRef.current) return;

    const diff = dynamicValue - prevValueRef.current;
    if (diff > 0) {
      // 上涨通知
      notification.success({
        message: '数值上涨',
        description: `当前数值：${dynamicValue}，涨幅：${diff}`
      });
      // 不用组件库可直接替换为：alert(`数值上涨，当前值：${dynamicValue}，涨幅：${diff}`)
    } else if (diff < 0) {
      // 下跌通知
      notification.error({
        message: '数值下跌',
        description: `当前数值：${dynamicValue}，跌幅：${Math.abs(diff)}`
      });
      // 不用组件库可直接替换为：alert(`数值下跌，当前值：${dynamicValue}，跌幅：${Math.abs(diff)}`)
    }

    // 更新存储的上一次数值
    prevValueRef.current = dynamicValue;
  }, [dynamicValue]);

  return <div>当前实时数值：{dynamicValue}</div>;
};

export default DynamicValueWatcher;

注意事项 #

• 如果动态数值存储在全局状态管理工具中，直接替换dynamicValue为全局状态变量即可，监听逻辑不需要修改
• 不需要额外写轮询检测变量变化，React的状态更新会自动触发useEffect回调，性能远高于手动轮询
• 如果需要避免弹窗打扰用户，可自行增加enableNotification状态变量，用户手动关闭后可停止弹窗触发

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