如何在React Hooks useEffect上比较oldValues和newValues？

小编典典

如何在React Hooks useEffect上比较oldValues和newValues？

reactjs

假设我有3个输入：rate，sendAmount和receiveAmount。我把那3个输入放在useEffect diffing params上。规则是：

如果sendAmount更改，我计算 receiveAmount = sendAmount * rate
如果receiveAmount改变了，我计算 sendAmount = receiveAmount / rate
如果费率发生变化，我计算receiveAmount = sendAmount * rate时间sendAmount > 0或计算sendAmount = receiveAmount / rate时间receiveAmount > 0

这是codesandbox
https://codesandbox.io/s/pkl6vn7x6j来演示此问题。

有没有一种方法可以比较oldValues和newValues喜欢，componentDidUpdate而不是为此情况制作3个处理程序？

谢谢

这是我使用 https://codesandbox.io/s/30n01w2r06的最终解决方案usePrevious

在这种情况下，我不能使用多个，useEffect因为每次更改都会导致相同的网络呼叫。这就是为什么我也使用changeCount跟踪更改的原因。这changeCount也有助于跟踪仅来自本地的更改，因此我可以防止由于服务器的更改而导致不必要的网络呼叫。

阅读 388

2020-07-22

共1个答案

小编典典

您可以编写一个自定义钩子，以使用 useRef 为您提供以前的道具
****

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

然后用在 useEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

但是，如果您useEffect对每个更改ID分别使用两个，则它更清晰，并且可能更好，更清晰地阅读和理解，您希望分别处理它们

2020-07-22