什么时候应该使用 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运行一次

您可以拥有触发 useEffect 的状态。

您应该将 useEffect 逻辑移至 onClick 听众吗？

这取决于你，如果你需要 render 你的应用程序，那么不需要。

onClick 函数需要根据页面逻辑做一些事情。

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

Beta 文档建议尽可能在事件处理程序中执行副作用，这里引用自 docs:

In React, side effects usually belong inside event handlers. Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure.

If you’ve exhausted all other options and can’t find the right event handler for your side effect, you can still attach it to your returned JSX with a useEffect call in your component. This tells React to execute it later, after rendering, when side effects are allowed. However, this approach should be your last resort.

Dan Abramov 的相关引述：

To sum up, if something happens because a user did something, useEffect might not be the best tool.

On the other hand, if an effect merely synchronizes something (Google Map coordinates on a widget) to the current state, useEffect is a good tool. And it can safely over-fire.

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

When should I use useEffect hook instead of event listeners?

event-listener

reactjs

react-hooks

use-effect

use-state