React優化-JSX模板優化-標籤化

什麼是JSX

JSX是JavaScrip的一種擴展語法，JSX的標籤語法既不是字符串也不是HTML；
從本質上講，JSX只是爲React.createElement(component, props, ...children)函數提供的語法糖。

JSX的痛點（項目開發中遇到的）

寫jsx模板的時候，咱們遇到循環輸出子組件或者標籤，須要經過Array.forEach或者for循環輸出；判斷選擇子組件的時候，須要經過if或者三元判斷輸出；一個模板裏面咱們會不少邏輯，這些邏輯看起來跟jsx不是很和諧！有沒有辦法作到標籤化，跟jsx語法一致尼？

jsx-control-statements介紹

安裝

npm install --save-dev babel-plugin-jsx-control-statements

配置.babelrc

{
  ...
  "plugins": ["jsx-control-statements"]
}

jsx-control-statements語法

If（可是目前不支持Else，這也是惋惜的）

// 簡單例子
<If condition={ true }>
  <span>IfBlock</span>
</If>

// 使用多個子元素或者表達式
<If condition={ true }>
  one
  { "two" }
  <span>three</span>
  <span>four</span>
</If>

// 轉化前
<If condition={ test }>
  <span>Truth</span>
</If>

// 轉化後
{ test ? <span>Truth</span> : null }

Choose、When、Otherwise（ 至關於switch case defualt）

// 轉化前
<Choose>
  <When condition={ test1 }>
    <span>IfBlock1</span>
  </When>
  <When condition={ test2 }>
    <span>IfBlock2</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>

// 轉化後
{ test1 ? <span>IfBlock1</span> : test2 ? <span>IfBlock2</span> : <span>ElseBlock</span> }

For

// 循環輸出的時候必須提供key
<For each="item" of={ this.props.items }>
    <span key={ item.id }>{ item.title }</span>
</For>

// 若是數組改變，則使用索引做爲鍵屬性是不穩定的
<For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
</For>

參考

https://github.com/AlexGiller...
JSX 介紹
JSX 深刻