React Native 指南 NO.0 篇 - JSX

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代码

{ pageText }

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

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

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

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

• 三元运算符

{ pageText ? pageText : 'welcome cat' }

• 非空判断

{ this.state.finished && 'Welcome Jou'}

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

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

{pageText = 'Welcome Jou', pageText }

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

• 函数调用

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

{this.name()}