React Hooks useEffect新旧值对比问题：多次重渲染下usePrevious失效的代币交换场景求助

我完全懂你这种头疼的感觉——在类似Uniswap的复杂表单交互里，频繁重渲染、不必要的异步请求堆成队列，usePrevious还掉链子抓不住真实的状态变更原因，确实让人挠头。结合你的场景，我给你几个偏向React声明式风格、能从根源解决问题的方案：

核心问题拆解 #

先理清你踩的坑：

1. usePrevious只能拿到上一次渲染的状态，但后续因balance/price更新导致的重渲染会立刻覆盖它，没法判断最初的变更类型（是切换单个代币，还是交换交易对）。
2. 依赖token的useEffect不分场景触发，连交换交易对这种不需要新请求的操作也会发起异步调用。
3. 复合状态（base/quote对象）的更新会触发全量重渲染，放大了性能问题。

方案一：主动标记变更意图，精准控制请求触发 #

不要被动依赖状态变化反向推导，而是在触发变更的地方（选择器切换、交换按钮点击）主动记录这次操作的类型，用一个专门的状态来传递这个意图：

import { useState, useEffect } from 'react';

// 新增状态记录交易对变更的意图
const [tradePairAction, setTradePairAction] = useState(null);

// 切换Base代币的处理函数
const handleBaseTokenChange = (newToken) => {
  setTradePairAction({
    type: 'SWITCH_TOKEN',
    prevPair: { base: base.token, quote: quote.token },
    newPair: { base: newToken, quote: quote.token }
  });
  setBase(prev => ({ ...prev, token: newToken }));
};

// 交换交易对的处理函数
const handleSwapPair = () => {
  setTradePairAction({
    type: 'SWAP_PAIR',
    prevPair: { base: base.token, quote: quote.token },
    newPair: { base: quote.token, quote: base.token }
  });
  // 直接交换状态，不需要触发新请求
  setBase(prev => ({ ...prev, token: quote.token, value: quote.value }));
  setQuote(prev => ({ ...prev, token: base.token, value: base.value }));
};

// 专门处理交易对变更的useEffect
useEffect(() => {
  if (!tradePairAction) return;

  const { type, newPair } = tradePairAction;
  if (type === 'SWITCH_TOKEN') {
    // 只有切换单个代币时才触发请求
    fetchBalanceAndPrice(newPair.base, newPair.quote);
  } else if (type === 'SWAP_PAIR') {
    // 交换交易对可以复用现有数据，反向计算价格即可
    setBase(prev => ({ ...prev, price: 1 / quote.price }));
    setQuote(prev => ({ ...prev, price: 1 / base.price }));
  }

  // 重置状态，避免重复触发
  setTradePairAction(null);
}, [tradePairAction, base.token, quote.token]);

这个方案的好处是完全掌握了每一次状态变更的意图，不会因为后续的balance/price更新而混淆判断，彻底避免不必要的请求。

方案二：拆分复合状态，减少无意义重渲染 #

你当前的base/quote是包含多个属性的复合对象，哪怕只是更新balance，整个对象都会被视为“变化”，触发所有依赖它的useEffect和重渲染。把它们拆成原子状态就能解决这个问题：

// Base相关原子状态
const [baseToken, setBaseToken] = useState(initState?.base?.token);
const [baseTokenId, setBaseTokenId] = useState(initState?.base?.tokenId);
const [baseValue, setBaseValue] = useState(initState?.base?.value);
const [baseBalance, setBaseBalance] = useState(undefined);
const [basePrice, setBasePrice] = useState(undefined);

// Quote同理拆分
const [quoteToken, setQuoteToken] = useState(initState?.quote?.token);
// ...其他Quote原子状态

拆分后，只有baseToken/quoteToken真正变化时，依赖它们的useEffect才会触发，balance/price的更新不会再干扰请求逻辑。同时配合React.memo包裹输入框、选择器等子组件，可以进一步减少不必要的重渲染。

方案三：用useRef持久化历史交易对，过滤交换场景 #

如果不想新增状态，也可以用useRef持久化最后一次触发请求的交易对，判断当前交易对是否是“交换后的反向对”，从而决定是否发起请求：

import { useRef, useEffect } from 'react';

const lastValidPairRef = useRef({
  base: initState?.base?.token,
  quote: initState?.quote?.token
});

useEffect(() => {
  const currentPair = { base: base.token, quote: quote.token };
  // 判断是否是交换后的反向对（比如BTC/USD → USD/BTC）
  const isSwappedPair = currentPair.base === lastValidPairRef.current.quote && 
                        currentPair.quote === lastValidPairRef.current.base;
  
  // 只有不是交换对，且和上次请求的交易对不同时，才触发请求
  if (!isSwappedPair && 
      (currentPair.base !== lastValidPairRef.current.base || 
       currentPair.quote !== lastValidPairRef.current.quote)) {
    fetchBalanceAndPrice(currentPair.base, currentPair.quote);
    lastValidPairRef.current = currentPair;
  }
}, [base.token, quote.token]);

这个方案不需要额外的状态，用ref持久化历史，避免了useState带来的额外重渲染，同时精准过滤掉交换交易对的场景。

附加优化：取消未完成请求，避免队列堆积 #

快速切换代币时，未完成的请求会堆积，不仅浪费资源还可能导致状态更新混乱。用AbortController取消之前的请求：

const fetchBalanceAndPrice = async (baseToken, quoteToken) => {
  const controller = new AbortController();
  try {
    const balanceRes = await fetch(`/api/balance/${baseToken}`, { signal: controller.signal });
    const priceRes = await fetch(`/api/price/${baseToken}/${quoteToken}`, { signal: controller.signal });
    
    setBaseBalance(await balanceRes.json());
    setBasePrice(await priceRes.json());
  } catch (err) {
    // 忽略取消请求的错误
    if (err.name !== 'AbortError') {
      console.error('请求失败:', err);
    }
  }
  // 返回取消函数，在新请求触发或组件卸载时调用
  return () => controller.abort();
};

总结下来，优先推荐方案一+方案二+请求取消的组合，既精准控制请求触发时机，又从状态结构上减少了无意义重渲染，完全符合React的声明式风格，比命令式的临时修复靠谱得多。

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