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

Question

在进行条件渲染时，最常见的方法是在利用其短路评估功能时使用三元运算符或逻辑&&运算符。

我的问题是关于性能的（我不是在问由于&&运算符可能导致的&& ），哪个是优先选择的？

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

操场：

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

在进行条件渲染时，最常见的方法是在利用其短路评估功能时使用三元运算符或逻辑&&运算符。

我的问题是关于性能的（我不是在问由于&&运算符可能导致的&& ），哪个是优先选择的？

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

操场：

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>
  );
};