为什么 React 组件会渲染？
Why does the React component render?
我有一个相当复杂的 React 应用程序。我面临的问题是，当在导航栏中单击 link 时，导航栏 re-renders。显然，这表明应用程序正在进行不必要的渲染。导航栏存在于“header”组件中。这个“header”应该是固定的。但它被多次调用。告诉为什么组件呈现的推荐方法是什么。我可以想到很多原因，我想开始消除它们以减少不必要的渲染。该组件可以是
- 改变内部状态（通过 useState）
- 使用效果
- 通过 useSelect 订阅了“外部”状态
- 更换道具
可能还有其他人。我如何判断组件渲染的原因？
（显然）没有简单的方法来判断组件呈现的原因，可能是因为它本质上需要深度比较（至少要涵盖所有情况），这可能是一项昂贵的操作。
但是有很多工具和解决方法。
- 使用 React dev tools（有帮助，但不显示 为什么 某些东西呈现）
- 临时加个useEffect观察具体数值
- 写一个可以同时观察几个特定值的钩子
- 安装some node package
- 查看
我有一个相当复杂的 React 应用程序。我面临的问题是，当在导航栏中单击 link 时，导航栏 re-renders。显然，这表明应用程序正在进行不必要的渲染。导航栏存在于“header”组件中。这个“header”应该是固定的。但它被多次调用。告诉为什么组件呈现的推荐方法是什么。我可以想到很多原因，我想开始消除它们以减少不必要的渲染。该组件可以是
- 改变内部状态（通过 useState）
- 使用效果
- 通过 useSelect 订阅了“外部”状态
- 更换道具
可能还有其他人。我如何判断组件渲染的原因？
（显然）没有简单的方法来判断组件呈现的原因，可能是因为它本质上需要深度比较（至少要涵盖所有情况），这可能是一项昂贵的操作。
但是有很多工具和解决方法。
- 使用 React dev tools（有帮助，但不显示 为什么 某些东西呈现）
- 临时加个useEffect观察具体数值
- 写一个可以同时观察几个特定值的钩子
- 安装some node package
- 查看