Question

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

它最初是作为功能组件构建的;我尝试将其更改为React.pureComponent和React.Component，其中包含＆＃39; shouldComponentUpdate＆＃39;函数返回false但没有帮助 - 组件仍然得到更新/呈现。

我想这可以通过虚拟Dom＆＃39;并没有渲染到实际的dom，但在更复杂的应用程序中，它仍然是昂贵的。有什么建议？ Code

更新

我已经分叉了原始存储库来演示这个问题。在this示例中，Header组件使用React.Component构建，而shouldComponentUpdate返回false。然而，每次目标更改时，标题都会呈现。 Code

Answer 1

从ShouldComponentUpdate方法返回false时，React不运行render方法。我通过添加console.log命令确认了它。

然而，Chrome的React扩展程序 - heighlight更新 - 仍然使标题更加明显。原因可能是Header是App Component的子组件，并且由于App的render方法运行，Header是高亮显示的。

Answer 2

我能想到的最简单的解决方案是将App组件转换为围绕ControlPanel和presentation的简单包装器组件。创建一个新的App组件，其中包含Header和Footer以及包装器组件。请确保App没有自己的状态，以避免重新渲染。

Answer 3

我的建议是不要担心它，只是让你的渲染功能尽可能便宜，让React做它的工作。

如果你小心翼翼地将所需的道具传递给任何组件，保持组件尽可能简单并且结构合理，并在简单组件之外进行任何昂贵的计算（以保持它们在状态变化之间），这是我会做的所有优化。

Answer 4

目前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呈现不必要的组件

更新

4 个答案: