React Native 久别重逢 NO.0 篇 - JSX

---

@author Jou Email Weibo or Github

首先 JSPatch 在很多方面已经足够优秀， 比如使用 JSPatch 热更新几个功能点， 完全不会有问题。但难免有些蹩脚的设计，不是那么方便，比如调用 C 函数， 加载 WebView 时的JavascriptCore 冲突(iOS 8之后的webkit 不会有影响，等（因为还有很多不顺手的地方）。

安装

安装环境，可以参考 React 官方文档。
React Get Start

开发工具

1. 编辑器 Atom + packages(nuclide & es6-javascript)

JSX

不同于HTML, XML 等语法规则，JSX 的产生是基于 ECMAScript 的特性设计。 在某种意义上，
JSX 更像是语法糖， 帮助我们更好，更方便的实现更易于维护的React Code。

一段JSX代码

<Text style={styles.welcome}>{ pageText }</Text>

其中 styles.welcome 和 pageText 都是变量。

不同于HTML，XML， style后面并没有引号。

{} 中的常见用法有三种：

1. 三元运算符
2. （&&）非空判断
3. （，）逗号分隔的多条语句
4. 函数调用

• 三元运算符

<Text style={styles.welcome}>{ pageText ? pageText : 'welcome cat' }</Text>

• 非空判断

<Text style={styles.welcome}>{ this.state.finished && 'Welcome Jou'}</Text>

其中 this.state.finished 为场景条件。

• （，）逗号分隔的多条语句

<Text style={styles.welcome}>{pageText = 'Welcome Jou', pageText }</Text>

最新版本的 React 不支持流程控制语句，if,while 等，可能源于过多的金字塔结构代码，影响可读性。我目前运行的版本是0.26.2。

• 函数调用

对于复杂的逻辑判断可以使用function 分离逻辑。

<Text style={styles.welcome}>{this.name()}</Text>