如何修改React18的useEffect以避免在组件更新时执行两次？

本文共计2689个文字，预计阅读时间需要11分钟。

目录：

一、执行两次的useEffect。

二、React 18 + useEffect 新特性及应对策略

一、首先了解一下React中useEffect执行的时机。

1.useEffect的执行时机。

2.如何让Effect只执行一次？

二、React 18 + useEffect 新特性及应对策略

1.React 18中useEffect的新特性。

2.如何应对这些新特性？

目录

• 一、执行两次的useEffect。
• 二、React18 useEffect 新特性
• 如何应对
• 1.首先先了解一下 React 中 useEffect 执行的时机
• 2.怎么样才能让 Effect 执行一次？。
• ###3.具体的解决方法
• 总结

一、执行两次的useEffect。

前段时间在本地启了一个 React Demo 项目，在编码的过程中遇到一个很奇怪的“Bug”。

其中简化版的代码如下所示。