我什么时候应该使用 useEffect 钩子而不是事件监听器？

Question

当可以使用事件监听器简化时，是否应该使用

useEffect

钩子？

例如，在下面的代码片段中，我使用事件侦听器来更改某些状态，然后使用

useEffect

钩子对状态更改做出反应并执行其他操作

import { useEffect, useState } from "react";

export default function Foo() {
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    // do any kind of business logic
  }, [isActive]);

  return (
    <>
      <button
        type="button"
        className="secondary"
        onClick={() => setIsActive(true)}
      >
        ACTIVATE
      </button>
      <button
        type="button"
        className="secondary"
        onClick={() => setIsActive(false)}
      >
        DEACTIVATE
      </button>
    </>
  );
}

我应该将

useEffect

逻辑移至

onClick

听众吗？

Answer 1

您似乎可以将该逻辑放入事件处理程序中，因为例如，从您的问题来看，您似乎没有与某些外部系统同步（反应文档提到这是您需要的原因之一

useEffect

）。所以我想说，如果你可以在事件处理程序中处理它，你应该这样做。

以下是文档中的一些引用：

文档：

在 React 中，副作用通常属于事件处理程序内部。事件 处理程序是 React 在您执行某些操作时运行的函数 操作 - 例如，当您单击按钮时。尽管事件 处理程序是在您的组件内部定义的，它们不会在 渲染！因此事件处理程序不需要是纯粹的。

如果您已用尽所有其他选项但找不到合适的活动 副作用的处理程序，您仍然可以将其附加到返回的 在组件中调用 useEffect 的 JSX。这告诉 React 稍后在渲染后、允许副作用时执行它。 但是，这种方法应该是您的最后手段。

Docs建议在您想与某些外部系统同步时更多地使用

useEffect

：

您确实需要效果来与外部系统同步。例如， 你可以编写一个 Effect 来保持 jQuery 小部件与 反应状态。您还可以使用 Effects 获取数据：例如， 您可以将搜索结果与当前搜索查询同步

要更深入地了解，我建议您查看 docs。

Answer 2

您不需要

useEffect

进行简单操作，

useEffect

还会调用您必须处理的组件挂载。

export default function Foo() {
  const onClick = useCallback((isActive) => {
    // fetch some data
    // set that data to state
  }, []);

  return (
    <>
      <button type="button" className="secondary" onClick={() => onClick(true)}>
        ACTIVATE
      </button>
      <button
        type="button"
        className="secondary"
        onClick={() => onClick(false)}
      >
        DEACTIVATE
      </button>
    </>
  );
}

Answer 3

UseEffect 在组件安装时运行一次。

您可以设置触发 useEffect 的状态。

您应该将

useEffect

逻辑移至

onClick

听众吗？

这取决于您，如果您需要

render

您的应用程序，所以不需要。

onClick 函数需要做一些取决于页面逻辑的事情。