&&運算符，三木運算符與React的條件渲染

在使用react框架的時候中往往會遇到需要條件渲染的情形，這時候，許多人會設想采用if語句來實現，比如下面，當滿足條件condition時，conditonRender渲染組件ComponentA,當不滿足 條件時，渲染ComponentB

const conditionRender = () =>{
   if(condition){
       return <ComponentA />
     }
   else{
       return <ComponentB />
    }
}

其實，結合三木運算符以及JSX的語法糖，它在形式和邏輯上可以變得更緊湊一些，比如：

const conditionRender = () =>{
    return {condition?<componentA />:<componentB />}
}

同樣的一些情況，我們也可以嘗試用&&運算符實現條件渲染，比如在滿足條件condition時，conditonRender渲染組件Component

const conditionRender = () =>{
   if(condition){
       return <Component />
     }
}

改成如下，因為&&運算符的特性，當condition為true時需要檢查&&后面那個表達式boolean值（true or false），那么Component就被渲染出來，而當conditon為false時，不在檢查&&運算符后面表達式的boolean值,那么Component就被隱藏了

const conditionRender = () =>{
   return {condition&&<Component />}
}

總結：其實兩者效果一樣，但在大量而復雜的代碼塊里，&&運算符和三木運算符的合理使用顯然會大大增強代碼的可讀性