显示/隐藏弹出窗口的性能差异.应对

Question

我有两种不同的方式在React中显示/隐藏弹出窗口.我想知道两者之间是否存在性能差异.我假设第一种方式更传统.

第一种方法:在return语句中显示基于条件语句的弹出窗口(整个代码可以在这里找到):

{this.state.showPopup ? 
  <Popup
    text='Close Me'
    closePopup={this.togglePopup.bind(this)}
   />
   : null
}

第二种方式:渲染按钮单击然后在关闭单击时卸载(整个代码可以在这里找到):

showPopup() {
  ReactDOM.render(
     <Popup
       text='Close Me'
     />,
     document.getElementById('popup')
   );
 }

closeClick() {
  ReactDOM.unmountComponentAtNode(document.getElementById('popup'));
}

Answer 1

对于经验,如果你想要最大化表现,最好的方法是你没有提到的第3个:通过CSS.

对显示/隐藏组件的类进行操作可以使协调更容易,并且您只需执行一次生命周期实例化方法.

尝试类似的东西:

className={this.props.shouldHide ? 'hidden' : ''}

安东尼的JsFiddle