使用 React，如何将 function 从父组件传递给子组件并在 useEffect 挂钩中运行？

Question

我正在使用 React 将 function 从父组件传递给子组件，并尝试在useEffect()挂钩中运行它。

家长

function Parent(props) {

  function alertMe() {
    alert('me');
  }

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

孩子

function Child(props) {

  const { alertMe } = props;

  useEffect(() => {
    alertMe();
  }, [alertMe]);

  render (
    <div>
      // stuff
    </div>
  );
}

如果我将alertMe作为子组件的useEffect()中的依赖项删除，它只会触发一次，但我会收到警告：

React Hook useEffect 缺少依赖项：'alertMe'。 要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

alertMe function 在加载时在父组件中定义一次，所以我不明白为什么它会在子组件中无休止地运行。 它不会像 state 那样改变。

如何将alertMe添加为useEffect()依赖项但仍只运行一次？

Answer 1

看，每次重新渲染时，您的Parent都会重新声明alertMe 。 并且由于alertMe在Child中引用不同的useEffect将检测到并重新运行。

最好不要与useEffect的依赖关系作斗争（它们是有原因的。）。 让我们确保您的alertMe在引用上是相同的：

function Parent(props) {

  const alertMe = useCallback(() => {
    alert('me');
  });

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

将带有依赖项列表的useEffect视为钩子世界中的componentDidUpdate 。 最好让组件与 props 保持同步，而不是忽略外部的变化。