React中对比对象数组价格变化并高亮显示的实现逻辑咨询

核心思路 #

要实现价格涨跌的颜色标记，关键是保留上一次的价格数据，每次新数据到来时和历史数据对比，根据结果设置对应样式。

具体实现步骤 #

1. 初始化状态存储历史价格和当前数据 #

用React的useState分别存储最新的股票列表，以及记录历史价格的对象（键为股票代码ticker，值为对应价格）：

import { useState, useEffect } from 'react';

function StockPriceTracker() {
  // 存储当前最新的股票数组
  const [stocks, setStocks] = useState([]);
  // 存储历史价格：{ ticker: priceNumber }
  const [historicalPrices, setHistoricalPrices] = useState({});

2. 定时获取/接收服务器推送的数据 #

通过useEffect设置定时器，每5秒获取一次数据（如果是服务器主动推送，比如WebSocket，就替换成对应的监听逻辑），并处理数据：

useEffect(() => {
    const fetchData = async () => {
      // 模拟请求服务器数据，实际替换成你的接口或WebSocket接收逻辑
      const response = await fetch('/api/stocks');
      const newStocks = await response.json();
      
      // 处理新数据，对比涨跌
      processNewStocks(newStocks);
    };

    // 初始加载一次
    fetchData();
    // 每5秒执行一次
    const interval = setInterval(fetchData, 5000);

    // 组件卸载时清理定时器
    return () => clearInterval(interval);
  }, []);

3. 对比新旧价格，更新状态 #

编写processNewStocks函数，遍历新数据，和历史价格对比，同时更新历史价格状态：

const processNewStocks = (newStocks) => {
    // 先更新当前股票列表
    setStocks(newStocks);
    
    // 更新历史价格：把新的价格存入，供下次对比使用
    const newHistoricalPrices = { ...historicalPrices };
    newStocks.forEach(stock => {
      // 把字符串价格转成数字，避免字符串比较出错
      const currentPrice = parseFloat(stock.price);
      newHistoricalPrices[stock.ticker] = currentPrice;
    });
    setHistoricalPrices(newHistoricalPrices);
  };

4. 根据涨跌动态设置样式 #

渲染股票列表时，对比当前价格和历史价格（首次加载时没有历史数据，不需要标记），给价格元素添加对应颜色：

const getPriceColor = (stock) => {
    const currentPrice = parseFloat(stock.price);
    const oldPrice = historicalPrices[stock.ticker];
    // 首次加载时oldPrice不存在，返回默认样式
    if (oldPrice === undefined) return 'black';
    // 价格上升→红色，下降→绿色，不变→默认颜色
    return currentPrice > oldPrice ? 'red' : currentPrice < oldPrice ? 'green' : 'black';
  };

  return (
    <div className="stock-container">
      {stocks.map(stock => (
        <div key={stock.ticker} className="stock-item">
          <span>{stock.ticker}</span>
          {/* 动态设置颜色 */}
          <span style={{ color: getPriceColor(stock) }}>{stock.price}</span>
          <span>变动: {stock.change}</span>
        </div>
      ))}
    </div>
  );
}

export default StockPriceTracker;

5. 可选：用CSS类代替行内样式 #

如果更倾向于CSS管理样式，可以定义类名，然后动态添加：

.price-up { color: red; }
.price-down { color: green; }
.price-unchanged { color: black; }

修改getPriceColor为返回类名：

const getPriceClass = (stock) => {
  const currentPrice = parseFloat(stock.price);
  const oldPrice = historicalPrices[stock.ticker];
  if (oldPrice === undefined) return 'price-unchanged';
  return currentPrice > oldPrice ? 'price-up' : currentPrice < oldPrice ? 'price-down' : 'price-unchanged';
};

渲染时：

<span className={getPriceClass(stock)}>{stock.price}</span>

注意事项 #

• 必须把字符串类型的price转成数字再比较，否则会出现字符串字典序比较的错误（比如"100"<"99"）。
• 首次加载时没有历史数据，此时不需要标记颜色，避免错误。
• 如果使用WebSocket接收推送，不需要定时器，直接在WebSocket的onmessage回调里调用processNewStocks即可。

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