React 团队表示，获取 prev 值的最佳方法是使用 useRef：https ://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

function Component(props) {
  const [ items, setItems ] = useState([]);

  const prevItemIdRef = useRef();
  useEffect(() => {
    prevItemIdRef.current = props.itemId;
  });
  const prevItemId = prevItemIdRef.current;

  // In a callback Hook to prevent unnecessary re-renders 
  const handleFetchItems = useCallback(() => {
    fetchItemsFromApi().then(setItems);
  }, []);

  // Fetch items on mount
  useEffect(() => {
    handleFetchItems();
  }, []);

  // I want this effect to run only when 'props.itemId' changes,
  // not when 'items' changes
  useEffect(() => {
    if(prevItemId !== props.itemId) {
      console.log('diff itemId');
    }

    if (items) {
      const item = items.find(item => item.id === props.itemId);
      console.log("Item changed to " item.name);
    }
  }, [ items, props.itemId ])

  // Clicking the button should NOT log anything to console
  return (
    <Button onClick={handleFetchItems}>Fetch items</Button>
  );
}

我认为这可能对您的情况有所帮助。

注意：如果不需要之前的值，另一种方法是为 props.itemId 多写一个 useEffect

React.useEffect(() => {
  console.log('track changes for itemId');
}, [props.itemId]);

⚠️注意：这个答案目前是不正确的，可能会导致意外的错误/副作用。该useCallback变量需要是useEffect钩子的依赖项，因此会导致与 OP 面临的问题相同的问题。

我会尽快解决

最近在一个项目中遇到了这个问题，我们的解决方案是将 的内容移动useEffect到回调（在这种情况下已记忆） - 并调整两者的依赖关系。使用您提供的代码，它看起来像这样：

function Component(props) {
  const [ items, setItems ] = useState([]);

  const onItemIdChange = useCallback(() => {
    if (items) {
      const item = items.find(item => item.id === props.itemId);
      console.log("Item changed to " item.name);
    }
  }, [items, props.itemId]);

  // I want this effect to run only when 'props.itemId' changes,
  // not when 'items' changes
  useEffect(onItemIdChange, [ props.itemId ]);

  // Clicking the button should NOT log anything to console
  return (
    <Button onClick={handleFetchItems}>Fetch items</Button>
  );
}

所以useEffect只将 ID props作为它的依赖项，并且回调项目和ID。

实际上，您可以从回调中删除 ID 依赖项并将其作为参数传递给onItemIdChange回调：

const onItemIdChange = useCallback((id) => {
  if (items) {
    const item = items.find(item => item.id === id);
    console.log("Item changed to " item.name);
  }
}, [items]);

useEffect(() => {
  onItemIdChange(props.itemId)
}, [ props.itemId ]) 

一个简单的方法是编写一个自定义钩子来帮助我们

// Desired hook
function useCompare (val) {
  const prevVal = usePrevious(val)
  return prevVal !== val
}

// Helper hook
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

然后在 useEffect

function Component(props) {
  const hasItemIdChanged = useCompare(props.itemId);
  useEffect(() => {
    if(hasItemIdChanged) {
      // …
    }
  }, [props.itemId, hasItemIdChanged])
  return <></>
}

我是一个 react hooks 初学者，所以这可能不对，但我最终为这种场景定义了一个自定义钩子：

const useEffectWhen = (effect, deps, whenDeps) => {
  const whenRef = useRef(whenDeps || []);
  const initial = whenRef.current === whenDeps;
  const whenDepsChanged = initial || !whenRef.current.every((w, i) => w === whenDeps[i]);
  whenRef.current = whenDeps;
  const nullDeps = deps.map(() => null);

  return useEffect(
    whenDepsChanged ? effect : () => {},
    whenDepsChanged ? deps : nullDeps
  );
}

它监视第二个依赖项数组（可能少于 useEffect 依赖项）的更改，并在这些更改中的任何一个时生成原始 useEffect。

以下是您如何在示例中使用（和重用）它而不是 useEffect：

// I want this effect to run only when 'props.itemId' changes,
// not when 'items' changes
useEffectWhen(() => {
  if (items) {
    const item = items.find(item => item.id === props.itemId);
    console.log("Item changed to " item.name);
  }
}, [ items, props.itemId ], [props.itemId])

这是它的一个简化示例， useEffectWhen 只会在 id 更改时显示在控制台中，而不是 useEffect 在项目或 id 更改时记录。

这将在没有任何 eslint 警告的情况下起作用，但这主要是因为它混淆了 exlint-deps 的 eslint 规则！如果你想确保你有你需要的 deps，你可以在 eslint 规则中包含 useEffectWhen。您将需要在 package.json 中使用它：

"eslintConfig": {
  "extends": "react-app",
  "rules": {
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useEffectWhen"
      }
    ]
  }
},

并可选择在您的 .env 文件中使用 react-scripts 来获取它：

EXTEND_ESLINT=true

基于前面的答案，并受到react-use 的 useCustomCompareEffect implementation 的启发，我继续编写useGranularEffect钩子来解决类似的问题：

// I want this effect to run only when 'props.itemId' changes,
// not when 'items' changes
useGranularEffect(() => {
  if (items) {
    const item = items.find(item => item.id === props.itemId);
    console.log("Item changed to " item.name);
  }
}, [ items ], [ props.itemId ])

实现为（typescript）：

export const useGranularEffect = (
  effect: EffectCallback,
  primaryDeps: DependencyList,
  secondaryDeps: DependencyList
) => {
  const ref = useRef<DependencyList>();

  if (!ref.current || !primaryDeps.every((w, i) => Object.is(w, ref.current[i]))) {
    ref.current = [...primaryDeps, ...secondaryDeps];
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useEffect(effect, ref.current);
};

在codeandbox上试试

的签名useGranularEffect与 相同useEffect，只是依赖列表被拆分为两个：

1. 主要依赖项：效果仅在这些依赖项更改时运行
2. 次要依赖项：效果中使用的所有其他依赖项

在我看来，它使仅在某些依赖项更改时才运行效果的情况更易于阅读。

笔记：

• 不幸的是，没有 linting 规则可以帮助您确保这两个依赖项数组是详尽无遗的，因此您有责任确保没有遗漏任何
• 忽略实现中的 linting 警告是安全的，useGranularEffect因为effect它不是实际的依赖项（它是效果函数本身）并且ref.current包含所有依赖项的列表（主要 + 次要，linter 无法猜测）
• 我正在使用 Object.is 来比较依赖项，以便它与 的行为一致useEffect，但可以随意使用您自己的比较函数，或者更好的是添加一个比较器作为参数