如何比较反应钩子useEffect上的oldValues和newValues ?

假设我有3个输入:rate、sendAmount和receiveAmount。我把这3个输入放到useEffect上。规则如下:

如果sendAmount改变了，我计算receiveAmount = sendAmount * rate 如果receiveAmount改变了，我计算sendAmount = receiveAmount / rate 如果速率发生变化，当sendAmount > 0时，我计算receiveAmount = sendAmount * rate;当receiveAmount > 0时，我计算sendAmount = receiveAmount / rate

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

是否有一种方法来比较oldValues和newValues，如componentDidUpdate，而不是为这种情况下做3处理程序?

谢谢

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

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

当前回答

使用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

2019-11-28 15:32:23

其他回答

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

const Component = (props) => {

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

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

Demo

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

Demo

2019-06-29 11:58:08

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

2018-11-23 12:22:38

小心大多数投票的答案。对于上述更复杂的场景，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
}

2022-04-22 09:15:24

我不喜欢上面的任何答案，我想要传递一个布尔值数组的能力，如果其中一个是真的，那么重新渲染

/**
 * effect fires if one of the conditions in the dependency array is true
 */
export const useEffectCompare = (callback: () => void, conditions: boolean[], effect = useEffect) => {
  const shouldUpdate = useRef(false);
  if (conditions.some((cond) => cond)) shouldUpdate.current = !shouldUpdate.current;
  effect(callback, [shouldUpdate.current]);
};

//usage - will fire because one of the dependencies is true.
useEffectCompare(() => {
  console.log('test!');
}, [false, true]);

2021-07-25 10:12:38

如果有人正在寻找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;
};

2019-08-29 09:06:31

如何比较反应钩子useEffect上的oldValues和newValues ?

推荐文章

最新文章

标签