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

Question

我正在使用 React 将一个函数从父组件传递给子组件，并尝试在 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 函数在加载时在 Parent 组件中定义一次，所以我不明白为什么它会在 Child 组件中无休止地运行。它不会像状态一样改变。

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

Answer 1

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

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

function Parent(props) {

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

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

想想 useEffect 和 hooks 世界中的 componentDidUpdate 的依赖关系列表。最好让组件与 props 保持同步，而不是忽略外部的变化。