为什么要将代码包装到没有第二个参数且无需清理的"useEffect"中？

Question

在我见过的大多数反应示例中，人们似乎避免将代码直接放入功能组件的主体中，而是将其包装到useEffect(() => {...})中。 例如，在官方文档中：

function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

为什么这比简单地写更好：

function Example() {
const [count, setCount] = useState(0);
document.title = `You clicked ${count} times`;
return (...);
}

在这两种情况下，文档标题都将在每次渲染时设置。(我相信useEffect()代码是在渲染后执行的，但这似乎与此示例无关，对吧(

我理解useEffect()的价值，如果：

状态

• 作为第二个参数传递，因此代码不会在每个渲染上执行，而是针对指定的状态更改执行。
• 我们利用清理机制。

但是没有那个呢？还有理由将您的代码包装成useEffect()吗？

Answer 1

回答我自己的问题。将代码包装到没有依赖项数组的useEffect中与直接在函数体中将该代码包装在一起的区别在于，它将在每个组件呈现之后执行，而不是在之前执行。

查看当前的 react 文档(2023 年 6 月(

如果省略此参数，则每次重新渲染组件后，效果将重新运行

我相信一些(较旧的(教程省略了依赖数组，而包含它实际上更有意义。

然而，当前的 react 文档(2023 年 6 月(对这个主题非常清楚，并在这里给出了更深入的解释。

Answer 2

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

代码应该是这样的，因为现在useEffect只会在计数状态改变时调用

Answer 3

请参阅此处有关 useEffect 钩子的官方文档。useEffect类似于componentDidMount、componentDidUpdate和componentWillUnmount的组合。它给你任何提示吗？