使用钩子多次渲染反应功能组件[重复]

Question

实际上，我没有得到这个问题的正确观点。于是寻求帮助。 我有这个状态的全功能组件。 我在这里注意到的是，当我使用 useEffect 钩子获取数据时，我得到了正确的响应。

问题是，当我在 return 语句中执行 console.log("ok") 时，它会在控制台中多次提供输出。图片添加如下：

这是我的状态和 useEffect 钩子

这是我的返回函数

这是我每次浏览页面时得到的控制台输出。

为什么 console.log("ok") 会执行多次？

Answer 1

React 非常简单，基本上一直在重新渲染所有内容。如果组件的状态发生变化，则会触发重新渲染。您更新状态 4 次，这就是原因。

Answer 2

它没有执行multiple次，它执行了5次：

1. useEffect（第一次渲染）
2. setMovies
3. setHeroImage
4. setCusrrentPage
5. setTotalPages

useEffect 的 deps 为 []，所以这只发生在第一次渲染时。然后您将更改状态 4 次，因此会发生重新渲染。这并不意味着 DOM 改变了 5 次。