首页 文章

React呈现不必要的组件

提问于
浏览 次
0

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

它最初是作为功能组件构建的;我尝试将其更改为React.pureComponent和React.Component，并使用'shouldComponentUpdate'函数返回false，但它没有帮助 - 组件仍然得到更新/渲染 .

我想这会到达'Virtual Dom'并且不会渲染到实际的dom，但在更复杂的应用程序中它仍然是昂贵的 . 有什么建议？ Code

更新

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

javascript reactjs

4 回答

  • 0

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

    回复于
  • 0

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

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

    回复于
  • 0

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

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

    回复于
  • 1

    目前，Header不是可以实现shouldComponentUpdate的组件 .

    像这样实现Header：

    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>
    )
}
}

    希望能解决你的疑问:)

    回复于

相关问题