原文链接：http://blog.zhaiyifan.cn/2016/08/04/android-new-project-from-0-p10/
本篇来讲讲 React Native 和 Redux，和其他一上来就啪啪啪丢上来一堆翻译的东西不同，本文会从简单的例子入手，让大家能快速地明白 React Native 是什么，Redux 和常见的 MVC、MVP 等有什么区别，怎么去组织一个 Redux 架构的 React Native 项目。
为避免大家还没入门就放弃，预计下一篇才会从我们项目中的实践出发，讲讲更复杂的应用场景。
什么是React Native
React Native
React Native 使你能够基于 JavaScript 和 React 在原生平台上构建应用，提倡的是 “learn once, write anywhere”，复用代码，提高开发效率。
项目由 Facebook 开源驱动，在过去的近一年中更新很活跃。文档建议直接看官网的 React Native，中文站有点坑。
支持系统：Android 4.1 (API 16) 以及 >= iOS 7.0。
关于 React，可以参见之前为掘金翻译计划翻译的 React.js 新手村教程，简单来说 React 将应用分为一个个动态可复用的组件 —— View的渲染（JSX）、数据如何绑定到显示、状态的变更（State）、属性（Props）都包含在组件内部。
React.js
整个应用由一个个组件搭积木而成（组件式开发），而每个组件则由状态驱动而变更。
React Native 正像它的名字，将 React 带到了原生世界，和 H5 不同的是，我们不再使用 CSS 和 HTML，而只有 js 为伴。我们也不再有那些 div, input 这些标签，而是由 View, TextInput 等等取代，更符合原生开发者们的习惯。布局上，幸而有强大的 Flexbox 支持，如果开发者们之前有使用或者看到过 Google 在 GitHub 发布的 Android 版 FlexboxLayout，相信对它会很熟悉。原生开发中的页面栈，也由 Navigator 进行了实现（在 Android 上还有 BackAndroid 的返回键支持）。
与 WebView 不同，React Native 运行的界面，最终会被解释映射为原生的 View，可以直接使用布局边界或者 Hierarchy Viewer 看出层级（js 文件会打包为一个bundle，位于assets下面，RN引擎会加载并进行解释映射）。
好处
- 体验 web 开发的便捷，不再需要编译，重新加载一下 js 就行了
- 可以直接使用 Chrome 或者 Nuclide 调试
- Android / iOS 两端可以共享很大一部分代码（RN 还在进行 Windows, MacOS, Node-webkit 等平台的支持）
- 热更新，JS bundle 下发一下新的就行了（当然也有一定局限性，如果是 hybrid，则 native 的 RN module 部分不能更新）
坏处
- 前端开发不会原生做不了 React Native（除非你能真只用自带的那些东西），而且理解那些 RN 提供的组件也会很头晕（需要同时了解 Android 和 iOS）。
- 原生开发需要一定成本的学习实践才能掌握 React Native。毕竟 ES6 不像过去的 JS 那么傻瓜式了。
- React Native 目前仍然处于快速迭代开发的阶段，你永远也不知道下个版本自己升级需要修改多少原来的代码。
- React Native 的资料较少，尤其是国内的，更尤其是 hybrid 开发的（GitHub 上的开源项目大多是纯 RN 的）。
什么是Redux
Counter List Files
index.android.js 和 index.ios.js 分别是 android 和 iOS 的 rn 入口，通常内容是相同的。
android 为 Android 的工程目录，下面有我们熟悉的 build.gralde。
ios 为 iOS 的工程目录，包含了 xcode 的项目。
app 就是 rn 的目录，包含了 Android 和 iOS 项目共享的 js 源码。
node_modules 是 node 通过解析 package.json 下载的依赖。
物理结构
Counter物理结构
CounterApp.js 则是整个应用的实际入口。
动作流
且不谈那些具体的 bind 和 createStore 操作，我们来看看当发生交互的时候，整个动作的分发，拿点击加号为例：
Counter活动图
onPress 事件触发了后续的一系列活动，而 Counter Component 的 action function 则由外部通过 props 传入（在这里，是 CounterApp 的 render 函数，如下）。
counterApp.js
再看看 store 的创建，在 App.js 入口：
app.js
而 Component 也不是直接调用 action 的 function，而是通过 bindActionCreators 注入到组件props中（这里是通过 react-redux 进行的，不是 redux 自身的东西，可以理解为 react 和 redux 之间的胶水）：
action bind
通常我们会在智能组件的末尾使用：
export default connect(mapStateToProps, mapDispatchToProps)(CardDetail);
这样来把 state 以及 action 注入。
Counters
接着我们来看看更为复杂的 Counters 项目，顶层目录结构类似，不再赘述。
demo
看完上面的 demo 动图后，相信大家对下面的解说会更容易理解。
物理结构
Counters物理结构
我们来详细讲一下 modules 下的 app 目录中的文件组织。
actions.js 和刚才一样，定义了一个个的 action，略有不同的是由于这次有异步的操作，所以涉及到了 dispatch 函数，关于 dispatch 可以查看官方文档。
constants.js 定义了所有 action 的 type，以及 App 的名字。
reducers.js 一样根据 action（payload 和 type）以及原来的 state 返回新的 state，另外，这里还进行了 initial state 即初始状态的定义（我们也可以把它放到单独的文件中）。
App.js 定义了页面的布局（渲染和 action），导出了 connect 生成的 container。我们简单看一下 render 部分是怎么做的。
Counters render
怎么样，JSX 是不是挺容易理解的？
动作流
Counter 本身的动作流上面我们已经举例过了，本工程中增减计数类似，唯一的区别是 action 不只有 type，还带了 payload（id）来标示不同的计数器。
所以这里我们拿增加计数器的点击事件来做例子。
Add Counter
看上去是不是跟上面的差不多？剩下的那个 incrementWithDelay 其实也差不多，只不过返回的是一个function，在 setTimeOut 回调中才进行 dispatch（thunk middleware 会帮我们进行处理）。
总结
上面我们通过物理结构和活动图大致了解了 React Native 上的 Redux 架构 app 是如何工作的。具体的细节，建议大家还是去查看 GitHub 上的源代码，通过上面的讲解后，应该不难理解。
技术栈
我们目前实践的React Nataive技术栈：
- immutable.js
- react
- redux
- react-redux
- redux-thunk
- redux-logger
- redux-mock-store
- react-native-router-flux
- react-native-simple-store
- regenerator
- undefined
- jest
更多阅读
- JavaScript
- 项目
- 八卦
- 如何看待阿里无线前端发布的Weex?
- weex&ReactNative对比，大头鬼对两者的对比，下面还有阿里P8的评论，评论很精彩，记得一页页看过去哦，哈哈。
网友评论