使用逻辑“ &&”和“三元”运算符渲染组件

Question

制作conditional rendering时，最常见的方法是在短路评估中使用ternary operator或logical && operator。

我的问题是关于性能的（我不是在问由于&&运算符而导致的后果），哪个是首选？

const isTrue = /* true or false */
const ConditionalRendering = () => (
  <>
    {isTrue && <Component />}
    {isTrue ? <Component /> : null}
  </>
);

我在堆栈溢出的答案之一中看到了这样的一条语句，这使我对上述示例的用例有所了解。

  

React在对帐时检查组件的类型   处理。因此，更好的（性能）方法是使用三元运算符：

{item === "first" ? <Component1 /> : null} 

     

不会渲染空值，但它们将占据react的位置   渲染树。

游乐场：

const Component = () => <FlexBox>{DEFAULT_INITIAL}</FlexBox>;

const ConditionalRendering = () => {
  const [isTrue, setIsTrue] = useState(true);
  const onClick = () => setIsTrue(prev => !prev);
  return (
    <FlexBox>
      {isTrue && <Component />}
      {isTrue ? <Component /> : null}
      <button onClick={onClick}>Toggle isTrue</button>
    </FlexBox>
  );
};

Answer 1

我想，两种情况都是相同的。按照React documentation：

  

false，null，undefined和true是有效的孩子。他们只是不渲染。

这意味着这不会影响性能。但是大多数开发人员更喜欢&&来使其代码漂亮。