RN的前生后世

一、React Native的由来

  1. 尽管在移动开发中，原生App的开发成本很高，但现阶段原生开发仍然是必须的，因为基于iOS和Android webView控件的web app用户体验比较差。

  2. React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物(文章最后说到RN和React的区别)，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于XML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

  3. RN开发摆脱了WebView，能够让你使用Javascript构建最接近原生的APP。

二、React Native的优势
   
  1. 使用虚拟DOM(Virtual DOM)来更新页面

      1) 更新原理

         a. 将当前的DOM树放到内存中

         b. 当状态变更时，会在内存中构建一个新的DOM树，并且在内存中让新的树和旧的树会进行比较，并记录两棵树的差异

         c. RN会把新旧两棵树不一致的内容给重新渲染到旧的DOM树上。已知的内容不变。以此来实现颗粒化更新

      2) 举例

           见《虚拟界面更新界面》

  2. 跨平台开发

      运用React Native，我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端，Android端和iOS端；

  3. 应用实现热更新

  4. Learn once, Write everywhere

      RN不强求一份原生代码支持多个平台，所以不是write once,run anywhere

  5. 用户体验接近原生

      不依赖于android和iOS的WebView
      内部会将RN控件转换成原生控件

三、学习React Native前需要掌握的知识

   1. HTML

     只需要知道怎么给标签设置内联样式以及设置属性，并深入理解标签的语义化便可。

   2. CSS

     知道CSS的基本用法以及盒模型即可

   3. JavaScript

     熟练掌握ES5的用法，了解ES6

     ES5就是我们通常所用的js,ES6就是下一代的js。

     因为目前很多教程直接使用的是ES6来写，建议大家在学习RN之前先快速的过一遍阮一峰写ES6教程，初略的过一遍就行，不需要精读。在学习过程中碰到不会的再去查。

   4. 任意一种js开发工具

      初期建议大家使用sublime(轻量级,但不能安装RN代码提示插件)，中后期建议大家使用webstrom(可以安装RN的代码提示插件)

   5. 熟悉iOS和android的开发最好

      不熟悉也不影响学习，了解这iOS和android会更快点上手

四、React Native的项目目录介绍

   1. 不同的RN版本项目目录可能有些小差别，目前我们需要关注的文件夹有以下几个：

      项目目录截图见《RN项目目录》

      android--------------------------RN生成的android studio的android项目
      iOS------------------------------RN生成的Xcode的iOS项目
      node_modules---------------------RN项目使用的核心模块
      node_modules/React---------------RN依赖的React框架
      node_modules/React Native--------RN框架
      index.android.js-----------------android项目的入口文件
      index.iOS.js---------------------iOS项目加载的入口文件

   2. 打开index.android.js和index.ios.js两个文件进行对比你就会发现这两个文件中的内容是一样的

   3. 熟悉android和iOS的同学可以打开上面提到的相应项目文，将启动文件设为自己的js文件。不熟悉的同学建议大家目前不要动，后面会慢慢提到

五、React Native启动文件详解

   1. RN中的组件,对应HTML中的标签

   2. 第十行要特别注意：如果你下面用到的组件都要首先在这里引入。

   3. 建议同学模拟这个写法多些几遍，熟悉一下这个RN的编码方式，这里面涉及的括号较多，写的时候要特别注意。

   4. 代码截图见《React Native启动文件详解》

六、补充

   1. React和React Native的区别

    a) React Native是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物。

    b) 相同点

       任何一种平台框架都有两部分：UI和逻辑，对于这两种技术来说，UI都使用了JSX,而逻辑都使用了JS

    c) 不同点(主要在于虚拟DOM起到的作用)

       React主要用于web开发，在运行时使用React将虚拟DOM装换成了实际DOM

       React Native主要用于开发Android和iOS App,就是在运行时将虚拟DOM映射成Android和iOS的本地控件