什么时候应该使用 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：

\n

文档：

\n

\n

在 React 中，副作用通常属于事件处理程序内部。事件处理程序是当您执行某些操作时 React 运行的函数 xe2x80x94 例如，当您单击按钮时。即使事件处理程序是在组件内部定义的，它们在渲染期间也不会运行！因此事件处理程序 don\xe2\x80\x99t 不需要是纯粹的。

\n

如果您\xe2\x80\x99已经用尽了所有其他选项，并且\xe2\x80\x99无法为您的副作用找到正确的\n事件处理程序，您仍然可以通过组件中的useEffect调用将其附加到返回的\nJSX。这告诉 React 在渲染后、允许副作用的情况下稍后执行它。\n但是，这种方法应该是您的最后手段。

\n

\n

另外，这里引用丹·阿布拉莫夫的话：

\n

\n

总而言之，如果某件事发生是因为用户执行某些操作而发生某些情况，\nuseEffect 可能不是最好的工具。

\n

另一方面，如果效果只是将某些内容（小部件上的 Google\n地图坐标）同步到当前状态，则 useEffect 是一个很好的\n工具。而且它可以安全地过火。

\n

\n