假设我有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还有助于仅从本地跟踪更改,因此可以防止由于服务器更改而引起的不必要的网络调用。


当前回答

对于真正简单的道具比较,您可以使用useEffect轻松查看道具是否已更新。

const myComponent = ({ prop }) => {
  useEffect(() => {
    ---Do stuffhere----
  }, [prop])
}

useEffect只在道具改变时才会运行代码。

其他回答

我刚刚发布了react-delta,它解决了这种情况。在我看来,useEffect有太多的责任。

责任

它使用Object.is比较其依赖数组中的所有值 它基于#1的结果运行effect/cleanup回调

分解责任

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

责任# 1

usePrevious(值) useLatest(值) useDelta(价值,选项) useDeltaArray (valueArray选项) useDeltaObject (valueObject选项) 一些(deltaArray) 每一个(deltaArray)

责任# 2

布尔useConditionalEffect(回调)

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

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

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

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

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

/**
 * 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]);

如果你更喜欢使用useEffect替换方法:

const usePreviousEffect = (fn, inputs = []) => {
  const previousInputsRef = useRef([...inputs])

  useEffect(() => {
    fn(previousInputsRef.current)
    previousInputsRef.current = [...inputs]
  }, inputs)
}

像这样使用它:

usePreviousEffect(
  ([prevReceiveAmount, prevSendAmount]) => {
    if (prevReceiveAmount !== receiveAmount) // side effect here
    if (prevSendAmount !== sendAmount) // side effect here
  },
  [receiveAmount, sendAmount]
)

注意,第一次执行效果时,先前传递给fn的值将与初始输入值相同。只有当值没有改变时,这才会对您有影响。