在jsx中，我們一般使用&&或者三目表達式來控制組件的渲染
// 使用三目表達式控制渲染哪個組件
{ hasKey? <TabBar />:<NoConnect />}
// 當(dāng)只需要控制一個組件時季春，則可以使用&&運算符
{ hasKey && <TabBar /> }
當(dāng)功能越來越復(fù)雜谒所，jsx越來越龐大热康，這種寫法多起來后，就嚴重影響了代碼的可讀性可維護性劣领，一大堆的花括號姐军，一大堆的三目表達式，一眼看過去非常的零亂。
于是奕锌，我便動手封裝了一個替換三目表達式的組件
export default function IfElse({ condition, children }) {
const childArr = React.Children.toArray(children);
if(condition){
return _.get(childArr, "[0]", null);
}
return _.get(childArr, "[1]", null);
}
很簡單著觉，只有一個if判斷，使用后就像這樣子
<IfElse condition={hasKey}>
<TabBar />
<NoConnect />
</IfElse>
看起來是不是要清爽很多惊暴，但是卻有很大的安全隱患饼丘，之前React次級渲染中有提到過，邏輯代碼將會優(yōu)于組件先執(zhí)行缴守。這將導(dǎo)致本該是安全判斷的前提代碼失效葬毫，報出異常。
<IfElse condition={object && object.image}>
<img src={object.image} />
</IfElse>
上述代碼的條件語句object && object.image本是對image屬性的安全判斷屡穗，但是在IfElse組件中完全失效贴捡，object.image取值語句優(yōu)先組件執(zhí)行，所以會報出異常村砂。如果項目泛用IfElse組件烂斋，那將導(dǎo)致無法預(yù)料的錯誤。（我立馬從代碼中刪掉了IfElse組件...）
由此可見础废，組件封裝jsx邏輯的思路并不安全汛骂，那么還有其他辦法嘛？
JSX-Control-Statements 就是解決這個問題的一個Babel插件评腺，它提供了諸如If帘瞭、Choose、When蒿讥、With蝶念、For等邏輯控制組件，但是這些都并不是真正的組件芋绸，而是在Babel編譯階段對其提供的組件進行轉(zhuǎn)碼成js代碼媒殉，從而實現(xiàn)的一系列控制組件。
比如上面的例子摔敛，改用If組件寫：
<If condition={object && object.image}>
<img src={object.image} />
</If>
JSX-Control-Statements則會將其轉(zhuǎn)譯成這樣
{
object && object.image?<img src={object.image} />:null
}
使用了js三目運算符廷蓉，所以避免了JSX組件中安全判斷不再安全的問題。
那么马昙，如果要控制多個組件渲染呢桃犬？再改寫下，上上面的組件
<Choose>
<When condition={ hasKey }>
<TabBar />
</When>
<Otherwise>
<NoConnect />
</Otherwise>
</Choose>
這里使用了Choose行楞、When攒暇、Otherwise三個組件，明顯可以感覺到代碼繁瑣了很多敢伸，在處理多個組件渲染的時候，JSX-Control-Statements也并不是很方便恒削，經(jīng)過轉(zhuǎn)譯后池颈，只是一個簡單的三目表達式
{ hasKey? <TabBar />:<NoConnect />}
在使用With尾序、For組件的時候，由于變量并未聲明躯砰，所以ESlint將會報出錯誤
<For each="item" index="index" of={ items }>
<span key={ item.id }>{ index }. { item.title }</span>
</For>
如上每币，item、index并未顯式聲明琢歇，雖然編譯為js后沒有錯誤兰怠，但是會逼死強迫癥。所以這里還需要搭配eslint-plugin-jsx-control-statements使用李茫。
相對于編譯時長的增加揭保，個人覺得將簡單的代碼繁瑣化更加讓人詬病，要不要使用JSX-Control-Statements主要還是取決個人喜好吧魄宏，反正也是編譯成js代碼秸侣，對于運行結(jié)果并沒有什么影響。
