离开公认的答案，一个不需要自定义钩子的替代解决方案:

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

这假设您实际上需要引用前面“process here”位中的任何值。否则，除非你的条件超出了一个直接的!==比较，这里最简单的解决方案是:

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

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

您可以使用useImmer而不是useState来访问状态。 示例:https://css - tricks.com/build -聊天-应用-使用-反应- hook - - code/ - 100 -行-

下面是Aadit M Shah的答案的Typescript版本。

我把它从useTransition重命名为usePrevious，因为useTransition已经存在于React中。

import { useEffect, useRef, useState } from 'react';

const usePrevious = <T extends any[],>(callback: (prev: T) => void, deps: T): void => {
  const callbackRef = useRef<null | ((prev: T) => void)>(null);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const depsRef = useRef<null | T>(null);

  const [initial, setInitial] = useState(true);

  useEffect(() => {
    if (!initial && depsRef.current !== null && callbackRef.current !== null) {
      callbackRef.current(depsRef.current);
    }

    depsRef.current = deps;
    setInitial(false);
  }, deps);
}

export default usePrevious;

用法:

  usePrevious<[boolean]>(([prevIsOpen]) => {
    console.log('prev', prevIsOpen);
    console.log('now', isOpen);
  }, [isOpen])

由于状态与功能组件中的组件实例不是紧密耦合的，因此如果不先保存之前的状态，例如使用useRef，则无法在useEffect中到达之前的状态。这也意味着状态更新可能在错误的位置被错误地实现，因为之前的状态在setState更新函数中可用。

这是useReducer的一个很好的用例，它提供了类似redux的存储，并允许实现各自的模式。状态更新是显式执行的，因此不需要确定更新的是哪个状态属性;这在已调度的行动中已经很清楚了。

下面是一个例子:

function reducer({ sendAmount, receiveAmount, rate }, action) {
  switch (action.type) {
    case "sendAmount":
      sendAmount = action.payload;
      return {
        sendAmount,
        receiveAmount: sendAmount * rate,
        rate
      };
    case "receiveAmount":
      receiveAmount = action.payload;
      return {
        sendAmount: receiveAmount / rate,
        receiveAmount,
        rate
      };
    case "rate":
      rate = action.payload;
      return {
        sendAmount: receiveAmount ? receiveAmount / rate : sendAmount,
        receiveAmount: sendAmount ? sendAmount * rate : receiveAmount,
        rate
      };
    default:
      throw new Error();
  }
}

function handleChange(e) {
  const { name, value } = e.target;
  dispatch({
    type: name,
    payload: value
  });
}

...
const [state, dispatch] = useReducer(reducer, {
  rate: 2,
  sendAmount: 0,
  receiveAmount: 0
});
...

使用Ref会在应用程序中引入一种新的错误。

让我们看看这个例子，使用usePrevious，之前有人评论过:

道具。minTime: 5 ==> ref.current = 5 | set ref.current 道具。minTime: 5 ==> ref.current = 5 |的新值等于ref.current 道具。minTime: 8 ==> ref.current = 5 |的新值不等于ref.current 道具。minTime: 5 ==> ref.current = 5 |的新值等于ref.current

正如我们在这里看到的，我们没有更新内部引用，因为我们使用的是useEffect

小心大多数投票的答案。对于上述更复杂的场景，usePrevious的变化可能会给你太多的重渲染(1)或与original(2)相同的值。

我们必须:

在useEffect中添加[value]作为依赖项，仅当值发生变化时重新运行 将JSON.parse(JSON.stringify(value))(或一些深度拷贝)赋值给useEffect中的ref.current，以防止将state的引用传递给ref而不是值

升级看点:

const usePrevious = <T>(value: T): T => {
  const ref: any = useRef<T>()

  useEffect(() => {
    ref.current = JSON.parse(JSON.stringify(value))
  }, [value])

  return ref.current
}