1

首先对糟糕的代码感到抱歉。我是 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/

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

4

2 回答 2

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

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

于 2021-06-13T06:40:15.940 回答
1

当您将fakeValue.currentref 直接传递到依赖项时，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

于 2021-06-13T07:05:52.880 回答