Javascript `显示：none`vs React中的条件渲染

在React中，我很难确定这两种渲染模式之间的差异。希望有人能解释一下这件事

模式1:React的条件渲染

类列表扩展了React.Component{
状态={
菜单：错，
}
handleMouseOver=（）=>{
这是我的国家({
菜单：对
});
}
handleMouseLeave=（）=>{
这是我的国家({
菜单：错误
});
}
render（）{
const{menu}=this.state；
返回(

{菜单&&}

);
}
}

模式2:

显示：无

菜单{
显示：无；
}
李：悬停。菜单{
显示：块；
}

const List=（）=>(

);

问题：

如果我需要在一个页面中呈现100个这样的项目，我应该选择哪种模式

如何确定哪种模式更好

---

使用其中一个比另一个有性能优势吗？

我倾向于在有简单条件显示某些内容（例如悬停等）的情况下使用

display:none

。 如果有点复杂（例如，单击复选框隐藏元素），那么我使用条件渲染。 这背后的原因是，我不想引起状态更改并触发像悬停状态这样琐碎的更新，也不想在涉及代码的事情上摆弄晦涩难懂的css类

这也是我个人的偏好

TL；DR:CSS如果超简单（例如悬停），则为有条件​ 如果涉及更多逻辑，则渲染