Javascript 显示/隐藏弹出窗口的性能差异。反应

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

第一种方式：根据return语句（）中的条件语句显示弹出窗口：

{this.state.showPopup？
：null
}

第二种方式：在单击按钮时渲染，然后在单击关闭时卸载（）：

showPopup（）{
ReactDOM.render(
,
document.getElementById（'popup'）
);
}
closeClick（）{
ReactDOM.unmountComponentAtNode（document.getElementById（'popup'））；
}

对于体验，如果您想要最大化性能，最好的方法是您没有提到的第三种方法：通过CSS

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

尝试以下方法：

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

---

从Anthony那里

我个人倾向于第一种解决方案（这对我来说更自然），但我对答案感兴趣；）谢谢你。如果有人感兴趣的话，这里有一个答案。

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

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

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