Javascript React渲染不必要的组件

在SimpleCreateReact应用程序中，我有一个简单的静态标题组件。为了便于阅读，标题保存在单独的组件中。当使用：Dveloper Tools-React-并选择heighlight updates时，我惊讶地看到每次目标更改时Header组件都会呈现。当然，这是因为父应用程序组件的状态发生了变化

它最初是作为一个功能组件构建的；我尝试将其更改为React.pureComponent，并使用“shouldComponentUpdate”函数将其更改为React.Component，该函数返回false，但没有帮助-该组件仍然得到更新/呈现

我猜这会进入“虚拟Dom”，而不会呈现到实际的Dom，但在更复杂的应用程序中，这仍然是昂贵的。有什么建议吗？

更新 我已经对原始存储库进行了分叉，以演示该问题。在这个示例中，Header组件是使用React.component构建的，shouldComponentUpdate返回false。然而，每次目标更改时，标题都会呈现。

---

我能想到的最简单的解决方案是将

应用程序
组件转换为
控制面板
和
演示文稿
周围的简单包装组件。创建一个新的
App
组件，该组件包括
页眉
和
页脚
，以及包装器组件。请确保
应用程序
没有自己的任何状态，以避免重新渲染。
我的建议是不要担心它，只需让渲染功能尽可能便宜，让React完成它的工作即可

如果您只需将所需的道具传递给任何组件，请使组件尽可能简单且结构合理，并在简单组件之外进行任何昂贵的计算（以在状态更改之间保持它们），这就是我要做的所有优化。
当前Header不是一个可以实现shouldComponentUpdate的组件

实现如下标题：

import React from 'react'
import '../App.css'
import globeLogo from './globe.svg'

export default class Header extends React.Component{

shouldComponentUpdate(nextProps, nextState) {
  //compare props and state if need to and decide whether to render or not
  //Other wise just return false;
}
render(){
 return (
        <div className="App-header">
            <img src={globeLogo} className="App-logo" alt="logo" />
          <h1>Choose My Next Destination</h1>
        </div>
    )
}
}

从“React”导入React
导入“../App.css”
从“./globe.svg”导入globeLogo
导出默认类标头扩展React.Component{
shouldComponentUpdate（下一步，下一步状态）{
//如果需要，比较道具和状态，并决定是否渲染
//另一个聪明的人只是返回错误；
}
render（）{
返回(
选择我的下一个目的地
)
}
}

希望这将解决您的查询：）
当从
ShouldComponentUpdate
方法返回false时，React不会运行render方法。我通过添加
console.log
命令确认了这一点

然而，Chrome的React扩展——heighlight更新——仍然会使标题变亮。原因可能是Header是App组件的一个子组件，并且由于App的render方法运行，因此Header是高亮度的
 PureComponent没有实现shouldComponentUpdatey您的代码没有演示您上面描述的内容。请提供一个最简单的示例来重现您观察到的行为。使标题组件扩展React.component并定义shouldUpdateComponent（）->false。@JoelCornett请检查更新。我在shouldComponentUpdate中添加了两个参数，名称为nextProps和nextState。然后我简单地返回false。但是，每次目标更改时，标头组件都会继续渲染。如果你正在使用客户端路由技术，比如react-router，你应该把头放在标签外面。我没有使用react-router。