React - 尽管程序运行良好，但 useMemo 会发出警告 (useMemo 有一个不必要的依赖)

问题描述

首先对糟糕的代码感到抱歉。我是 React 的新手，所以请原谅：P。在这里，我创建了 2 个按钮，“添加”和“更改假货”。当我点击“添加”时，它不会重新渲染子组件，当我点击“更改假”时，它会重新渲染组件，因为我的依赖在 useMemo 中发生了变化，它会创建并向子组件发送一个新的对象道具.但是我收到 useMemo 的警告，说这是一个不必要的依赖项，尽管我需要依赖项。我怎么能去那个警告消失。有没有更好的方法来做到这一点？

注意：我的子组件是一个虚拟组件。它对这些道具没有任何作用。

import Child from "./Child";

const Parent = () => {
  const [count,setCount] = useState(0);
  const fakeValue = useRef(10);

  const randomProp = useMemo(() => {
    return { val: fakeValue.current };
  },[fakeValue.current]);

  const changeFake = () => {
    fakeValue.current = fakeValue.current + 1;
    setCount(count + 1);
  };

  return (
    <>
      <div>{count}</div>
      <div>{fakeValue.current}</div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <button onClick={() => changeFake()}>Change fake</button>
      <Child randomProp={randomProp} />
    </>
  );
};

export default Parent; 

输出链接：https://i.stack.imgur.com/5spw1.png CodeSandBox 链接：https://codesandbox.io/s/silly-pine-fzjw9?file=/src/

也许是个愚蠢的问题。但我会感谢社区的一些反馈：)

解决方法

fakeValue.current 是一个不必要的依赖项，因为改变它不会重新渲染组件。我们不添加引用作为依赖项。

您可以通过添加一个空数组作为对 useMemo 的依赖来消除警告。

const randomProp = useMemo(() => {
  return { val: fakeValue.current };
},[]); // Pass an empty array like this

https://codesandbox.io/s/usememo-warning-67955446-5x8j3

如果您需要进一步的支持，请告诉我。

,

当您将 fakeValue.current ref 直接传递给 useMemo 的依赖项时，它不会更改 randomProp 的值。那么子组件不会re-render。 所以你需要做这样的事情。

const randomValue = fakeValue.current;

  const randomProp = useMemo(() => {
    return { val: randomValue };
  },[randomValue]);

如果不需要重新渲染，只想去掉警告，可以去掉fakeValue.current依赖

CodeSandbox 链接修改代码：https://codesandbox.io/s/stoic-thunder-9ylxi?file=/src/Parent.js