ReactNative开发入门理解

趋势:当前许多移动端应用都在探索的新架构方向,以国外Facebook基于业务需求先发起,国内淘宝,微信,百度,京东,美团等无线部门都在探索的方向,动态化解决方案都是向web端靠了. 以React Native 用 JS 控制 Native 的概念为主流趋势,阿里开源了自家的电商动态化解决方案weex.微信发起了小程序风波,掀起了国内主流应用的移动端技术迭代之路.也是关注许久,github上面跟着同学的reading项目,开始了一名Android开发的ReactNative的探索之路.本篇先介绍下与Android相关的大体思路与方向

关于这些讨论分享2个知乎连接如何评价 React Native？与如何看待阿里无线前端发布的Weex?

ReactNative开发介绍:

RN运行时包含一个原生的主线程和一个JS线程， JS线程执行JS代码，负责界面布局和业务逻辑处理， 原生线程负责界面渲染和原生组件的执行。 RN里面尽量使用原生组件，避免重复造轮子。 组件化开发.

这样的好处:

一.是可以利用现有的大量的原生组件，降低入门门槛；

二.是可以达到跟原生应用一样的性能；

三是通过JS封装过后的组件，可以支持跨平台。

RN应用开发里面， RN只负责UI的绘制和跟原生系统的通信,流程控制和业务逻辑等部分 ，对于一个完整的应用来说，

还有许多技术层面的东西需要考虑，包括复杂计算,底层功能,导航、应用状态管理和持久化、数据缓存、网络请求、错误处理等原生接口完成.这样既提高了开发效率，又兼顾了性能。

RN开发需要学习的技术栈:

Js,React,Redux,FlexBoxLayout,

1.js语言

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行 预编译）。主要用来向 HTML（ 标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的 js文件有利于结构和行为的 分离。跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如 Windows、 Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

日常用途:

1. (1)嵌入动态文本于HTML页面。[4] 
2. (2)对浏览器事件做出响应。[4] 
3. (3)读写HTML元素。[4] 
4. (4)在数据被提交到服务器之前验证数据。[4] 
5. (5)检测访客的浏览器信息。[4] 
6. (6)控制cookies，包括创建和修改等。[4] 
7. (7)基于Node.js技术进行服务器端编程。[6] 

2.React

RN是React在移动平台的衍生，自然会依赖 React。React只是一个View Library，只负责页面的生成。React创建的是与特定平台无关的虚拟DOM Tree，这个虚拟DOM Tree最终将渲染成特定平台的UI。这样一来Rect就与平台无关，可以很方便的移植到Web以外的其它平台，比如iOS和Android。RN的诞生也是源于此。React的核心就是JSX，类似于HTML，React使用它来描述UI。JSX本质上是JS语法的扩展，可以完全利用JS的能力，因此描述能力比HTML强大许多

3.Redux   

Redux 是JS应用的状态容器，并且状态是可预测的。随着单页面应用的兴起，应用状态越来越复杂，再加上状态可变和操作异步，应用状态就更加不可控了。 
Redux提出了三大原则来使得应用状态的改变是可预测的，从而大大简化了应用状态的维护。

• 真相只有一个 只有一个全局唯一的store来存放应用状态，应用状态的各部分按树形结构组织。
• 状态只读 要改变状态只能通过发出action来完成，action描述了具体要做什么改变。
• 通过纯函数来完成状态改变 这个纯函数称为reducer，reducer接收现有状态和action，返回新状态，但不改变原有状态。

这三大原则保证了应用状态修改的可预测性，因为任何修改都通过action做了记录，出现问题时很容易就能够定位到是哪个action导致。在应用状态比较复杂时，reducer可以拆分成多个，每个负责某部分状态的修改，以降低单个reducer的复杂度。React组件是可以拥有状态的，有状态的组件通常都比较复杂，使用Redux能够把组件状态抽取出来统一管理和维护，从而使得复杂的有状态组件变成了简单的无状态组件。Redux对于复杂应用开发来说非常关键，建议详细读完官方文档。

3.Flexbox   Layout

Google 开源的 Android 排版库：FlexboxLayout。

1.什么是 Flexbox

简单来说 Flexbox 是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局，并且 React Native 也是使用的 Flex 布局。你可以简单的理解为 Flexbox 是CSS领域类似 Linearlayout 的一种布局，但是要比 Linearlayout 要强大的多。

2.什么是 FlexboxLayout？

刚才说了 Flexbox 是CSS领域的比较强大的一个布局，我们在 Android 开发中使用 Linearlayout + RelativeLayout 基本可以实现大部分复杂的布局，但是Google就想了，有没有类似 Flexbox 的一个布局呢？这使用起来一个布局就可以搞定各种复杂的情况了，于是 FlexboxLayout 就应运而生了。