Javascript 重新渲染与隐藏可见性

我有一个简单的条件渲染组件

我有两种方法

function SimpleComponent({ visible }){
  return (
    <button style={{position: 'absolute'}}>
      {visible && <p>Visible!</p>}
      <p style={{ visibility: `${visible ? 'visible' : 'hidden' }}>Visible!</p>
    </button>
  );
}

函数SimpleComponent（{visible}）{
返回(
{可见&&可见！
}
可见
);
}

但我不确定哪种方式更能提高效率

---

请给我一个想法或意见。

这取决于你的需要。如果你想隐藏元素，但不要从DOM树中删除它（这样你就可以访问它-应用一些动画，平滑地弹出它，测量元素的高度/宽度等），请使用css

可见性

属性

如果您只想隐藏它，而不想在它隐藏时访问它，请使用condition

visible&…

。该元素根本不会在DOM树中呈现

注意：就效率而言，第二种方法更好，因为DOM树中的元素越少越好

---

还要注意的是，即使元素应用了

可见性：hidden

属性，它仍然会占用应用程序中的空间（在视口中）并且会影响其他元素的位置。

谢谢你回答这个愚蠢的问题。：）我认为第二种方法更好，但我只是不确定…这就是为什么我在父元素上添加了

位置：绝对
。