如何在效果上比较旧值和新值？多次重新渲染

Question

有点像这里描述的问题如何比较反应挂钩使用效果的旧值和新值？

但是在我的例子中，useprovalhook没有帮助。

想象一下这个表单有几个输入、选择等等。你可能想看看https://app.uniswap.org/#/swap 进行类似的可视化。几乎任何更改都会发生多个操作和数据更新，这将导致多次重新渲染，至少4次。例如

我有两个输入，每个代表一个标记。基础（第一个）和报价（第二个）。

这是基地的状态

const [base, setBase] = useState({
    balance: undefined,
    price: undefined,
    value: initState?.base?.value,
    token: initState?.base?.token,
    tokenId: initState?.base?.tokenId,
});

并引用

const [quote, setQuote] = useState({
    balance: undefined,
    price: undefined,
    value: initState?.quote?.value,
    token: initState?.quote?.token,
    tokenId: initState?.quote?.tokenId,
});

他们会形成一对，比如BTC/USD。

通过更改选择菜单中的令牌（而不是BTC，我将选择ETH），我将触发多个操作：获取钱包余额、获取价格，并且将有更多的重新提交程序，输入视图更新和模式窗口关闭。因此，目前至少有4起此类事件正在发生。我希望能够比较base。令牌和basePrv与const basePrv=useprovian（base？.token） 但在第二次重新渲染基。令牌和basePrv将具有相同的令牌属性，这是一个问题。

我也有输入之间的交换功能，我应该用quote和quote来改变base，就像这样

setBase(prevState => ({
    ...prevState,
    base: quote
}));

setQuote(prevState => ({
    ...prevState,
    quote: base
}));

在这种情况下，不应触发其他请求。

现在，我对它有use效应和令牌依赖关系。但是每次当令牌要更改时，它都会被触发，这将导致额外的异步调用和请求的“尾部”，如果你要快速单击的话。这就是为什么我需要比较更改之前的令牌属性，以了解我是否应该因为新对的形成（BTC/USD变成ETH/USD）而进行额外的调用和请求，或者我应该忽略它，因为它只是一个"交换”（BTC/USD变成USD/BTC），不需要进行额外的调用和提取。我只是不得不，嗯，交换它们，而不是更多。

因此，在我的故事中，usePrevioushook将只返回前一个令牌属性一次，在第二次和第三次时，它将被多个重新呈现（将获取其他属性）覆盖到新的令牌属性。因此，在触发useffect时，我将没有机会比较上一个令牌属性和当前令牌属性，因为它们将显示相同的属性。

关于如何解决这个问题，我有一些想法，但我不确定这是对还是错，因为在我看来，这些决定看起来更具必要性，而不是陈述性。

>

我可以让一切保持原样（请求总是在任何更改时触发，无论更改是什么。是交换还是用户更改了一对）。我可以禁用交换按钮，直到所有请求都完成。它将解决请求“tail”的问题。但这是一种热修复，这将是可行的，但我不喜欢它，因为它会导致额外的不必要的请求，它将是缓慢的，不利于用户体验。

在由setBase或setQuote更新之前，我可以使用一个状态来保持前一对。它将允许我使用use效应，并将前一对与当前一对进行比较，以了解该对是否已更改，或者只是交换，并决定我是否应该进行读取和调用。

我可以用base摆脱useffect。令牌和报价。标记依赖项，并处理onClick处理程序中的所有内容。因此，交换功能不会触发useffect，只有当用户单击并选择不同的内容时，才会触发调用和获取。但正如我所说，这个选择对我来说似乎有点奇怪。

我试图在这里使用闭包来“记住”令牌的前一个状态，但它有点类似于使用当前组件状态。另外，您必须在功能组件主体之外初始化闭包，我看不出有可能以这种方式将init状态转移到闭包中，因此代码变得更加杂乱无章。

伙计们还有其他想法吗？我肯定错过了什么。也许很多重新渲染是反模式，但我不确定如何避免。




Answer 1

您的问题可能有多种解决方案。我建议选择一个更容易理解的。

您可以修改usePre以往钩子以在多个呈现中存活。

提示：使用JSON. stringify比较，如果您认为值将是一个复杂的对象，并且可能会更改引用，即使是相同的实际值。

function usePrevious(value) {
  const prevRef = useRef();
  const curRef = useRef();

  if (value !== curRef.current){
  // or, use
  // if ( JSON.stringify(value) !== JSON.stringify(curRef.current)){
    prevRef.current = curRef.current;
    curRef.current = value;
  }
  
  return prevRef.current;
}

因为您使用令牌（字符串）作为use效应的依赖数组，并且您不介意它们的顺序（交换不应该改变任何东西），所以对依赖数组进行排序，如

useEffect(
  () => {
    // do some effect
  },
  [base.token, quote.token].sort()
)

在存储API响应数据的同时，还存储与该数据关联的令牌（请求的一部分）。现在，您将有两套代币。

1. 当前选择的代币

您可以选择仅在当前获取的令牌不能满足您的需要时获取。您还可以扩展此功能，存储以前的API请求/响应，并尽可能从中选择结果。

在所有这些中，第三似乎是个不错的选择

我会选择第二个，因为简单和极简主义。然而，这仍然取决于你在最后发现什么更容易。