javascript - 显示/隐藏弹出窗口的性能差异。 react

Question

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

第一种方法:根据返回语句中的条件语句显示弹出窗口 ( entire code can be found here ):

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

第二种方式:单击按钮时渲染，然后单击关闭时卸载 ( entire code can be found here ):

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

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

Answer 1

就经验而言，如果你想最大化性能，最好的方法是你没有提到的第三种:通过CSS。

作用于显示/隐藏组件的类可以使协调变得更容易，并且您可以执行一次生命周期实例化方法。

尝试如下:

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

JsFiddle来自安东尼