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

Question

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

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

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; 

Output 链接： https://i.stack.imgur.com/5spw1.png代码沙盒链接：Z5E056C500A1C4B6A7110B50D807BADE/s-rc: ///-fzio7BADE/spine.

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

Answer 1

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

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

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

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

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

Answer 2

当您将fakeValue.current ref 直接传递给 useMemo 的依赖项时，它不会更改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