当所有依赖项都更改时使用效果？

Question

当前，只有一个依赖项发生更改时，才会触发useffect。

当两个（或所有）依赖项都已更改时，我如何更新/使用它进行回击？

Answer 1

我喜欢@AustinBrunkhorst的soultion，但是你可以用更少的代码来完成它。

使用仅在满足条件时更新的状态对象，并将其设置在第二个useEffect中。

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [ab, setAB] = useState({a, b});

  useEffect(() => {
    setAB(prev => {
      console.log('prev AB', prev)
      return (a !== prev.a && b !== prev.b) 
        ? {a,b} 
        : prev;  // do nothing
    })
  }, [a, b])

  useEffect(() => {
    console.log('both have changed')
  }, [ab])

  return (
    <div className="App">
      <div>Click on a button to increment its value.</div>
      <button onClick={() => setA((prev) => prev + 1)}>A: {a}</button>
      <button onClick={() => setB((prev) => prev + 1)}>B: {b}</button>
    </div>
  );
}

Answer 2

您必须跟踪依赖项以前的值，并检查它们中是否只有一个发生了更改，或者两个/全部都发生了更改。基本实现可以如下所示：

import React from "react";

const usePrev = value => {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

const App = () => {
  const [foo, setFoo] = React.useState(0);
  const [bar, setBar] = React.useState(0);
  const prevFoo = usePrev(foo);
  const prevBar = usePrev(bar);

  React.useEffect(() => {
    if (prevFoo !== foo && prevBar !== bar) {
      console.log("both foo and bar changed!");
    }
  }, [prevFoo, prevBar, foo, bar]);

  return (
    <div className="App">
      <h2>foo: {foo}</h2>
      <h2>bar: {bar}</h2>
      <button onClick={() => setFoo(v => v + 1)}>Increment foo</button>
      <button onClick={() => setBar(v => v + 1)}>Increment bar</button>
      <button
        onClick={() => {
          setFoo(v => v + 1);
          setBar(v => v + 1);
        }}
      >
        Increment both
      </button>
    </div>
  );
};

export default App;

这里还有一个代码沙盒链接供您使用。

您可以在其他地方检查usePrev钩子是如何工作的，例如这里。

Answer 3

当所有依赖项都已更改时，需要添加一些逻辑来调用效果。这里的useeffectAllDepsChange应该实现您期望的行为。

这里的策略是将以前的DEP与当前的DEP进行比较。如果它们没有完全不同，我们会将以前的dep保存在ref中，直到它们完全不同才进行更新。这允许您在调用效果之前多次更改DEP。

import React, { useEffect, useState, useRef } from "react";

// taken from https://usehooks.com/usePrevious/
function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);
  
  return ref.current;
}

function useEffectAllDepsChange(fn, deps) {
  const prevDeps = usePrevious(deps);
  const changeTarget = useRef();

  useEffect(() => {
    // nothing to compare to yet
    if (changeTarget.current === undefined) {
      changeTarget.current = prevDeps;
    }

    // we're mounting, so call the callback
    if (changeTarget.current === undefined) {
      return fn();
    }

    // make sure every dependency has changed
    if (changeTarget.current.every((dep, i) => dep !== deps[i])) {
      changeTarget.current = deps;

      return fn();
    }
  }, [fn, prevDeps, deps]);
}

export default function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  useEffectAllDepsChange(() => {
    console.log("running effect", [a, b]);
  }, [a, b]);

  return (
    <div>
      <button onClick={() => setA((prev) => prev + 1)}>A: {a}</button>
      <button onClick={() => setB((prev) => prev + 1)}>B: {b}</button>
    </div>
  );
}

受Richard启发的另一种方法更干净，但缺点是在更新过程中渲染更多。

function useEffectAllDepsChange(fn, deps) {
  const [changeTarget, setChangeTarget] = useState(deps);

  useEffect(() => {
    setChangeTarget(prev => {
      if (prev.every((dep, i) => dep !== deps[i])) {
        return deps;
      }

      return prev;
    });
  }, [deps]);

  useEffect(fn, changeTarget);
}