React条件渲染：if-else与逻辑与两种写法的差异是什么？

先看两种写法的代码：

第一种写法：

function App(isTrue){
  if(isTrue)
    return <ComponentA/>
  else
    return <ComponentB/>
}

第二种写法：

function App(isTrue){
  return(<>
    {isTrue && <ComponentA/>}
    {!isTrue && <ComponentB/>}
    </>
  )
}

两者的核心差异主要有以下几点：

• 组件树结构不同
  第一种写法中，App组件的返回值直接是<ComponentA/>或<ComponentB/>，两个组件不存在共同的父容器，是互斥的根节点。
  第二种写法里，两个组件被包裹在React片段(<></>)中，App始终返回这个片段作为根节点，两个条件组件是片段的子节点，共享同一父容器。

• falsy值处理差异
  第一种写法依赖if/else的布尔判断，只要isTrue是falsy值（比如0、''、null、undefined），都会进入else分支返回<ComponentB/>，不会出现意外渲染内容。
  第二种写法用短路求值(&&)，如果isTrue是0、''这类falsy但非布尔false的值，isTrue && <ComponentA/>会返回该falsy值，React会把它渲染到页面上（比如0会显示成文本），导致多余内容。

• 扩展性不同
  如果后续需要添加始终渲染的元素（比如页脚、导航栏），第一种写法需要在if和else两个分支里都添加该元素，或者重构为用容器包裹；第二种写法只需在片段里直接追加元素即可，不用修改条件渲染的逻辑。

• 根节点限制的影响
  第一种写法返回单个组件，天然符合React组件只能返回单个根节点的规则；第二种写法因为要并列写两个条件渲染组件，必须用片段或真实DOM元素（比如<div>）作为容器，否则会触发React的语法错误。

内容的提问来源于stack exchange，提问作者Rakesh yadav