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

Question

假设我有 3 个输入：rate、sendAmount 和 receiveAmount。我将这 3 个输入放在 useEffect 差异参数上。规则是：

• 如果 sendAmount 改变，我计算 receiveAmount = sendAmount * rate
• 如果receiveAmount改变，我计算 sendAmount = receiveAmount / rate
• 如果汇率发生变化，我计算 receiveAmount = sendAmount * rate 当 sendAmount > 0 或者我计算 sendAmount = receiveAmount / rate 当 receiveAmount > 0 时

这是用于演示问题的代码框 https://codesandbox.io/s/pkl6vn7x6j 。

有没有办法比较 oldValues 和 newValues 就像在 componentDidUpdate --- 上一样，而不是为这种情况制作 3 个处理程序？

谢谢

---

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

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

原文由 Erwin Zhang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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])
}

但是，如果您对要单独处理的每个更改 id 分别使用两个 useEffect ，则它更清晰，可能更好更清晰地阅读和理解

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果有人正在寻找 usePrevious 的 TypeScript 版本：

在 .tsx 模块中：

 import { useEffect, useRef } from "react";

const usePrevious = <T extends unknown>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

或者在 .ts 模块中：

 import { useEffect, useRef } from "react";

const usePrevious = <T>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

原文由 SeedyROM 发布，翻译遵循 CC BY-SA 4.0 许可协议