您可以编写一个自定义钩子来使用useRef为您提供以前的props

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 分别使用两个，它会更清晰，可能更好更清晰地阅读和理解

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

在一个.tsxmodule中：

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

或者在一个.tsmodule中：

import { useEffect, useRef } from "react";

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

选项 1 - 当值改变时运行 useEffect

const Component = (props) => {

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

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

演示

选项 2 - useHasChanged 钩子

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

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

演示

离开接受的答案，一个不需要自定义钩子的替代解决方案：

const Component = ({ receiveAmount, sendAmount }) => {
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

这假设您实际上需要参考“此处处理”位中的任何内容的先前值。否则，除非您的条件超出了直接!==比较的范围，否则这里最简单的解决方案就是：

const Component = ({ receiveAmount, sendAmount }) => {
  useEffect(() => {
     // process here
  }, [receiveAmount]);

  useEffect(() => {
     // process here
  }, [sendAmount]);
};

我刚刚发布了react-delta解决了这种确切的场景。在我看来，useEffect有太多的责任。

职责

1. 它使用以下方法比较其依赖项数组中的所有值 Object.is
2. 它根据 #1 的结果运行效果/清理回调

分解责任

react-delta将useEffect的职责分解为几个较小的钩子。

责任#1

• usePrevious(value)
• useLatest(value)
• useDelta(value, options)
• useDeltaArray(valueArray, options)
• useDeltaObject(valueObject, options)
• some(deltaArray)
• every(deltaArray)

责任#2

• useConditionalEffect(callback, boolean)

根据我的经验，这种方法比useEffect/useRef解决方案更灵活、更干净、更简洁。