Question

除了清理和依赖项数组之外，是否还有任何理由使用useEffect？

function App() {
  const [a, setA] = useState(0);

  const b = `Number: ${a}`;

  return (
    <div className="App">
        <p>
          {b}
        </p>
        <button onClick={() => setA(a + 1)}>click</button>
    </div>
  );
}

我们可以看到，我们没有使用useEffect，但是由于更改状态a将触发重新渲染，因此b也将被更改。在这种情况下，我们似乎甚至不需要useEffect。

那么useEffect除了清理和依赖项数组之外，还有什么独特的好处？

编辑

我认为大多数答案都基于一个假设：OP对反应生命周期逻辑有很好的理解。但不幸的是，这是我的弱点。

尽管我经常使用useEffect和那些旧的component*生命周期方法，但我并没有真正意识到它们不在函数组件本身之外。这给了他们更多的灵活性和功能性。

我不是要侮辱任何人，但我确实认为我们应该更具体，更仔细地回答这个问题。遍历我的个人资料的人都可以看到我也回答了很多问题。根据我的经验，人们通常甚至不具备提出关键和明确问题的知识，甚至不知道关键是什么（是的，我是这个问题中的一员）。

当我尝试回答该问题时，我将首先尝试澄清问题，以了解OP缺少的关键要素是什么。

@PatrickRoberts确切地说的是正确的话，但这并没有真正帮助我，因为那不是我所缺少的。我会侮辱自己，我没有把问题弄清楚。但是我也想说，理解/澄清问题比给出正确答案更重要。毕竟，从理论上讲，大多数问题都可以通过官方文件解决。

Answer 1

通过使用此Hook，您可以告诉React您的组件在渲染后需要做一些事情。 React会记住您传递的函数（我们将其称为“效果”），并在执行DOM更新后稍后调用它。为此，我们可以设置文档标题，但也可以执行数据获取或调用其他命令性API。

function Example() {
 const [count, setCount] = useState(0);

 useEffect(() => {
   document.title = `You clicked ${count} times`;
 });
}

与componentDidMount或componentDidUpdate不同，使用useEffect安排的效果不会阻止浏览器更新屏幕。这使您的应用程序感觉更灵敏。大多数效果不需要同步发生。

useEffect和function body之间有什么区别？

编辑

1 个答案: