useEffect 和函数体有什么区别？ [复制]答案

【问题标题】：What is the difference between useEffect and function body? [duplicate]useEffect 和函数体有什么区别？ [复制]
【发布时间】：2020-10-18 03:36:30
【问题描述】：

除了清理和依赖数组，还有什么理由使用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 确实在说一些正确的话，但这并没有真正帮助我，因为这不是我缺少的部分。我会侮辱自己，因为我没有把问题说得足够清楚。但我也想说，理解/澄清问题比给出正确答案更重要。毕竟理论上大部分问题都可以通过官方文档解决。

【问题讨论】：

涉及到对在 DOM 中呈现的节点的引用或发出异步 HTTP 请求的事情怎么样？您展示的用例是完全同步的，不涉及 DOM，因此useEffect 毫无意义。见the docs。
@ggorlen 我想它并没有真正回答我的问题，我知道普通类风格和新钩子风格之间的区别。但我不知何故明白你的意思，如果我需要异步的东西，那么我应该使用useEffect，这是你的重点吗？
不，但这是其中很大一部分，因为在功能组件返回用于渲染的 JSX 之前，任何异步操作都无法运行。对useEffect 的回调不会与函数体同时运行，这会将其置于钩子之前存在的“生命周期方法”类中。
@ggorlen 是的，我认为您的观点是最有说服力的，您能否将其补充为具体答案以便我接受？
谢谢，但它对我来说似乎仍然是重复的。还有其他资源可以说明什么是钩子以及我们为什么要在 SO 周围使用它们，我认为这些答案将比我在这里的漫谈更具权威性。现有的答案在这里看起来也不错。

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

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

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

【讨论】：

那只是复制文档，我肯定知道文档。
我认为该声明的目标非常明确。它只是有状态组件生命周期方法的一种解决方法。