Javascript React-使用三元运算符是否会导致React中的渲染速度变慢

我刚刚读了博客，有人能看一下并告诉我使用三元运算符导致渲染速度慢是正确的吗

避免频繁安装/卸载

很多时候，我们习惯于使用三元语句（或类似语句）使组件消失：

import React，{Component}来自'React'；
从“./DropdownItems”导入DropdownItems；
类下拉列表扩展组件{
状态={
伊索彭：错
}
render（）{
我们的产品
{
这个州
? 
：null
}
}
toggleDropdown=（）=>{
this.setState（{isOpen:！this.state.isOpen}）
}
}

由于已从DOM中删除，因此可能会导致浏览器重新绘制/回流。这些可能很昂贵，特别是如果它导致其他HTML元素四处移动的话

为了缓解这种情况，建议避免完全卸载组件。相反，您可以使用某些策略，如将CSS不透明度设置为零，或将CSS可见性设置为“无”。这将使组件保持在DOM中，同时使其有效地消失，而不会产生任何性能成本

---

上述陈述是否正确，您是否同意？

就您所做的而言，它不应导致任何明显的减速。但是，如果您不想引起挂载/卸载，您应该考虑将属性添加到DROPPDIONTS组件中，例如“代码>可见/代码”，然后可以将样式应用到您的子组件：

<DropDownItems visible={this.state.isOpen} />

---

就你正在做的事情而言，它不应该导致任何明显的减速。但是，如果您不想引起挂载/卸载，您应该考虑将属性添加到DROPPDIONTS组件中，例如“代码>可见/代码”，然后可以将样式应用到您的子组件：

<DropDownItems visible={this.state.isOpen} />

---

你能链接这篇文章吗？@Y4glory它并没有告诉你不要使用三元运算符。它告诉您设置CSS属性（如不透明度或无显示），而不是卸载组件。这就是导致性能问题的原因。@Y4glory我的问题也是一样的。它是否真的会导致性能问题？它会，频繁地安装和卸载组件会导致性能差。但是三元运算符的使用并不是导致性能问题的原因（这是我从问题标题中得到的印象），你能链接这篇文章吗？@Y4glory它并没有告诉你不要使用三元运算符。它告诉您设置CSS属性（如不透明度或无显示），而不是卸载组件。这就是导致性能问题的原因。@Y4glory我的问题也是一样的。它是否真的会导致性能问题？它会，频繁地安装和卸载组件会导致性能差。但是三元运算符的使用并不是导致性能问题的原因（这是我从问题的标题中得到的印象）

export const DropDownItems = ({visible}) => {
  const displayStyle = visible ? 'block' : 'hidden';

  return (
    <div style={{display: displayStyle}}>
      ... your items in here
    </div>
  )
};