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

Question

假设我有3个输入:rate、sendAmount和receiveamount。我把这3个输入放在useEffect不同的参数上。这些规则是：

• 如果sendAmount已更改，则计算ReceiveAmount=sendAmount*Rate
• 如果receiveAmount已更改，则计算SendAmount=receiveAmount/Rate
• 如果费率更改，则在发送金额>0时计算接收金额=发送金额*费率或在接收金额>0
时计算 发送金额=接收金额/费率

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

有没有一种方法可以比较oldvalues和newvalues,就像在componentdidupdate上那样,而不是为这种情况创建3个处理程序？

谢谢

下面是我使用usePreviorhttps://codesandbox.io/S/30N01W2R06的最终解决方案

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

Answer 1

const Component = (props) => {

  useEffect(() => {
    console.log("val1 has changed");
  }, [val1]);

  return <div>...</div>;
};

演示

将当前值与前一个值进行比较是一种常见的模式，并证明它自己的自定义钩子隐藏了实现细节。

const Component = (props) => {
  const hasVal1Changed = useHasChanged(val1)

  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
  });

  return <div>...</div>;
};

const useHasChanged= (val: any) => {
    const prevVal = usePrevious(val)
    return prevVal !== val
}

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

演示

Answer 2

如果有人正在查找UsePrevious的打字版本：

在.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;
};

Answer 3

您可以编写一个自定义钩子，使用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，阅读和理解起来可能会更清楚、更清楚