React Native 久別重逢 NO.0 篇 - JSX
@author Jou Email Weibo or Github
首先 JSPatch 在很多方面已經(jīng)足夠優(yōu)秀， 比如使用 JSPatch 熱更新幾個(gè)功能點(diǎn)， 完全不會(huì)有問(wèn)題。但難免有些蹩腳的設(shè)計(jì)，不是那么方便，比如調(diào)用 C 函數(shù)， 加載 WebView 時(shí)的JavascriptCore 沖突(iOS 8之后的webkit 不會(huì)有影響，等（因?yàn)檫€有很多不順手的地方）。
安裝
安裝環(huán)境，可以參考 React 官方文檔。
React Get Start
開(kāi)發(fā)工具
- 編輯器 Atom + packages(nuclide & es6-javascript)
JSX
不同于HTML, XML 等語(yǔ)法規(guī)則，JSX 的產(chǎn)生是基于 ECMAScript 的特性設(shè)計(jì)。 在某種意義上，
JSX 更像是語(yǔ)法糖， 幫助我們更好，更方便的實(shí)現(xiàn)更易于維護(hù)的React Code。
一段JSX代碼
<Text style={styles.welcome}>{ pageText }</Text>
其中 styles.welcome 和 pageText 都是變量。
不同于HTML，XML， style后面并沒(méi)有引號(hào)。
{} 中的常見(jiàn)用法有三種：
- 三元運(yùn)算符
- （&&）非空判斷
- （，）逗號(hào)分隔的多條語(yǔ)句
- 函數(shù)調(diào)用
- 三元運(yùn)算符
<Text style={styles.welcome}>{ pageText ? pageText : 'welcome cat' }</Text>
- 非空判斷
<Text style={styles.welcome}>{ this.state.finished && 'Welcome Jou'}</Text>
其中 this.state.finished 為場(chǎng)景條件。
- （，）逗號(hào)分隔的多條語(yǔ)句
<Text style={styles.welcome}>{pageText = 'Welcome Jou', pageText }</Text>
最新版本的 React 不支持流程控制語(yǔ)句，if,while 等，可能源于過(guò)多的金字塔結(jié)構(gòu)代碼，影響可讀性。我目前運(yùn)行的版本是0.26.2。
- 函數(shù)調(diào)用
對(duì)于復(fù)雜的邏輯判斷可以使用function 分離邏輯。
<Text style={styles.welcome}>{this.name()}</Text>
