相对简单的React应用程序有一个组件在页面加载时重新渲染7次

Question

My React应用程序目前在结构方面相当简单，尽管组件中的逻辑越来越严格。结构基本上是具有Header组件的Index，并且如果用户登录，则将加载具有组件X、Y和Z的Home组件，对应于左侧边栏、主区域和右侧边栏。

当我在右侧边栏工作时，我有一些console.log()语句可以提供帮助。我现在注意到，右侧边栏Z组件对于给定的新页面加载显示7次，这取决于我查看日志的频率。该组件具有以下粗略代码：

• 使用React.useState([default value])声明组件的各种状态
• 检查Redux存储以获取我的应用程序的当前身份验证用户(authedUser(
• 一个React.useEffect()，用于检查是否有经过身份验证的用户，如果有，则设置两个组件状态。这个useEffect触发了, [authedUser]);的关闭-我怀疑这可能是重新招标的原因
• 一些点击事件处理程序，包括一个更复杂的程序，当点击某个按钮时，它会调用Google API，使用

authedUser的Redux存储值用于Index、Header和Z。可以更改此存储值的dispatch调用仅发生在与用户登录相关的函数中

问题：

1. 我担心这个组件被重新渲染了这么多，这是对的吗
2. 你知道是什么原因导致的吗
3. 有什么工具我可以用来回答"；何时/为什么要重新渲染"问题

Answer 1

您有一个主组件和三个子组件。您可能在主组件中有一个状态变量，并将这些状态变量作为道具传递给子组件。每次每个状态变量更改其状态时，主组件都会重新渲染，从而导致必须重新渲染子组件。为了使子组件仅在其相关状态变量更改状态时重新呈现，需要使用react memo和useCallback钩子。