理念
组件（components）
工程师希望能像搭积木s 一样开发和维护系统，通过组装模块得到一个完整的系统。
在 RN 中，就是通过把 html、css 和 JS 放在一起维护，变成一个可以组合的单元，来搭建网页。数据-视图 state - render
数据变化后，对应的视图部分就会变化。
语法
ES6 vs ES5
RN 官方文档的教程默认用的是 ES6 语法(但组件和API这块还夹杂着大量的ES5语法)。另外，RN 项目在本地 node_modules 有个 bable 的包，可以把 ES6 转换为 ES5，所以不用担心新语法不能被现有浏览器编译。
先简单介绍下默认项目中使用的几个 ES6 语法点，但不展开。
let 和 const 与 val 类似，都是用来声明变量的。
箭头函数(x) => 2*x // 相当于function(x){return 2*x} Class 类
//定义类 class Title { // 构造函数 constructor(text) { this.text= text; } // 原型链方法 render() { return ( this.text ) } } // ES5 function Title (text){ this.text= text; } Point.prototype.render= function () { return ' '+this.text+' '; } 继承 用 extends 继承类
class SubHeader extends Header {} 模块引用
// ES6import { Component, StyleSheet, View } from 'react-native'; // 等同于let _rn= require('react-native'); let Component= _rn.Component, StyleSheet= _rn.StyleSheet, View = _rn.View; // 项目开始时，先引入默认模块和其他模块import React, { AppRegistry, Component, Image, ListView, StyleSheet, Text, View,} from 'react-native'; JSX vs HTML(模板) & CSS & JS
JSX 是一种混合 HTML、CSS 和 JS 的语法，所以在 JSX 中忘了结构、样式、行为分离吧。在 React 中只有模块，JSX这种语法也是为组件服务的。
最简单的组件
render 方法用来渲染组件。每个组件由首先由最基本的 HTML 结构 或其他组件组成。
View 就是一个 RN 封装好的组件，它对应着 div，UIView，android.view，用于页面布局。 Text 也是一个 RN 封装好的组件，它类似着 span 之类的标签，里面装的是文字。RN 是没有匿名文本节点的，所有文字必须装在 Text 中间。class TitleList extends Component{ render() { return ( React Native ); }} 我们只要将数据 TitleList 输出到虚拟机的 app（MyProject）中，即可看到写好的文本。
// 将 TitleList 注入到 app 中AppRegistry.registerComponent('MyProject', () => TitleList); 我们可以用变量代替文字。
let title = 'React Native';class TitleList extends Component{ render() { return ( {title} ); }} 给组件加点样式
直接在组件中写 style={} ，在中间使用对象的写法书写样式即可。
let title = 'React Native';class TitleList extends React.Component{ render() { return ( React Native ); }} 当然也可用直接给个在 style 中 class 名
let title = 'React Native';const styles = StyleSheet.create({ title : { flexDirection: 'row', height: 100, padding: 20, }});class TitleList extends React.Component{ render() { return ( React Native ); }} 拼装组件
有了单个 title 碎片后，希望把它拼装成一个真正的 list。我们需要引入一个原生组件 ListView ，并把定义的 title 组件和真实的数据拼装到 ListView 组件中去。
// 首先将 title 碎片 拿出来renderTitle (titles) { return ( {titles.description} );}// 引入一个原生组件 ListView// 用 renderRow 属性引用 renderTitle 组件。// 再将用 dataSource 属性引用数据，这里用 this.state.dataSource 表示数据，后续会对其初始化render() { return ( 组件的数据流
然后用 constructor 对 this.state.dataSource 初始化
constructor (props) { // 继承父类 super(props); // 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。 // RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。 let ListDate = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); // 初始化 ListView数据，注意 state 一般用于可能被事件触发并改变视图的数据。 this.state = { dataSource: ListDate.cloneWithRows([ { description: 'RN1' }, { description: 'RN2' }, { description: 'RN2' }, { description: 'RN2' }, { description: 'RN2' }, ]) }; } 完整的组件
class TitleList extends React.Component{ // 初始化 constructor (props) { // 不知道干嘛用，不加会报错。 super(props); // 实例化一个 ListView.DataSource 对象。并且只修改改变数据，这可以保证只渲染改动的地方。 // RN 的 state 属性对应的数据变了，那么组件就会被重新渲染。只修改局部数据，那么直有组件的局部被重新渲染。 let ListDate = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); // 初始化 ListView 数据 this.state = { dataSource: ListDate.cloneWithRows([ { description: 'RN1' }, { description: 'RN2' }, ]) }; } // 渲染 render() { // ListView 是个原生组件 // dataSource 属性声明的是组件的数据 // renderRow 将 renderTitle 按排渲染 return ( // dataSource 传来的数据 {titles.description} ); }} 工具
启动 命令行编辑器 webstrom 支持 JSX调试 chrome参考文献
React 入门实例教程（阮一峰） ECMAScript 6 入门（阮一峰） es5-es6写法对照表（天地之灵） React Native 官网 React Native 中文 React 官网