多次渲染带有钩子的react功能组件

Question

实际上，我没有正确理解这个问题。因此寻求帮助。 我有这个状态的完整功能组件。 我在这里注意到的是，当我使用useEffect挂钩获取数据时，我会正确地获得响应。

问题是，当我在return语句中执行console.log（“ ok”）时，它将在控制台中多次提供输出。图像添加如下：

这是我的状态和useEffect钩子

这是我的返回函数

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

为什么console.log（“ ok”）执行多次？

Answer 1

它没有执行multiple次，它正在执行5次：

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

useEffect的deps为[]，因此这仅发生在第一个渲染中。然后您将状态更改4次，因此发生了重新渲染。这并不意味着DOM被更改了5次。

Answer 2

由于useState重新呈现了组件，因此您应该阅读React文档以了解

Answer 3

React非常简单，并且基本上始终重新渲染所有内容。如果组件的状态已更改，则会触发重新渲染。您更新状态4次，这就是原因。