Reactjs 在功能组件中进行不必要的重新渲染，即使使用useEffect和cleanup？

我正在努力创建高效的代码。我知道，如果状态或道具发生变化，组件将重新播放，但我觉得我有一些不必要的渲染正在进行，我不确定如何跟踪它，或者是否有必要开始

我有一个博客列表，其中有4篇文章是在api获取之后从useEffect中设置的时间线原子映射而来的。

组件在每页刷新时呈现17次。我不应该期望它只渲染4次（？）

以下是应用程序的基本结构：

<UserProvider>
  <App>
    <Application>
      <Timeline> // fetch post data in useEffect w/ cleanup, then (items) => setTimeline(items)
        {timeline && timeline.map((post, i) => {
          <Post data={post} key={i}/> // there are 4 posts in the db
        } 
      </Timeline>
    </Application>
  </App>;
</UserProvider>

React框架可以“渲染”组件，执行任何DOM扩散等操作的次数不限。。。但是请注意，这与作为渲染周期一部分的组件渲染不同。您看到的很可能是“渲染阶段”，您已经将控制台日志放在那里了。如果将日志移动到

useffect

hook，作为“提交阶段”的一部分，它在每个渲染周期运行一次，我相信您会看到更少的日志。

<APP /> // renders only once (so far so good...)
<APPLICATION /> // Application renders 4 times
<TIMELINE /> // Timeline renders 9 times
<APPLICATION />
<TIMELINE />
<APPLICATION />
<TIMELINE />
<TIMELINE />
<APPLICATION />
<TIMELINE />
<TIMELINE />
<TIMELINE />
<POST /> // Post renders 17 times (there are only 4 posts)
<POST />
<POST />
<POST />
<POST />
<POST />
<POST />
<POST />
<TIMELINE />
<POST />
<POST />
<POST />
<POST />
<POST />
<TIMELINE />
<POST />
<POST />
<POST />
<POST />