javascript - React 渲染不必要的组件

Question

在 this简单的 Create-React-App 应用程序，我有一个简单的静态 Header 组件。为了便于阅读， header 保存在单独的组件中。当使用:Dveloper Tools - React - 并选择高度更新时，我惊讶地发现每次目标更改时都会渲染 Header 组件。当然，发生这种情况是因为父组件(App 组件)的状态发生了变化。

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

我猜这会到达“虚拟 Dom”并且不会渲染到实际 dom，但在更复杂的应用程序中它仍然很昂贵。有什么建议么？ Code

更新

我已经 fork 了原始存储库来演示该问题。在 this例如，Header 组件是使用 React.Component 构建的，并且 shouldComponentUpdate 返回 false。然而，每次目的地发生变化时，标题都会呈现。 Code

Answer 1

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

然而，Chrome 的 React 扩展 - heightlight 更新 - 仍然会高亮标题。原因可能是 Header 是 App Component 的子组件，并且由于 App 的 render 方法运行，所以 Header 被高亮显示。