React Native02 - 基础介绍
前言
本篇内容目前还是不涉及敲代码，主要涉及到的内容如下所示：
- React Native的由来
- React Native的优势
- 学习React Native前需要掌握的知识
- React Native项目目录介绍
- React Native启动文件详解
- 补充
一、React Native的由来
-
尽管在移动开发中，原生App的开发成本很高，但现阶段原生开发仍然是必须的，因为基于iOS和Android webView控件的web app用户体验比较差。
-
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物(文章最后说到RN和React的区别)，目前支持iOS和安卓两大平台。RN的业务逻辑使用Javascript语言编写，UI用的是类似于XML的JSX和CSS。
-
RN开发摆脱了WebView，能够让你使用Javascript构建最接近原生的APP。
二、React Native的优势
1. 使用虚拟DOM(Virtual DOM)来更新页面
-
更新原理
-
将当前的DOM树放到内存中
-
当状态变更时，会在内存中构建一个新的DOM树，并且在内存中让新的树和旧的树会进行比较，并记录两棵树的差异
-
RN会把新旧两棵树不一致的内容给重新渲染到旧的DOM树上。已知的内容不变。以此来实现颗粒化更新
-
2. 跨平台开发
- 运用React Native，我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端，Android端和iOS端；
3.应用实现热更新
- 目前苹果为了安全考虑，已经全面禁止热更新了。
4. Learn once,Write everywhere
- RN不强求一份原生代码支持多个平台，所以不是write once,run anywhere。
5. 用户体验接近原生
- 不依赖于android和iOS的WebView
- 内部会将RN控件转换成原生控件
6. RN和原生可以混合开发
- 比如原生有一个已经完善的模块，RN提供比较简洁的方式将该原生模块桥接到RN里，供RN使用。RN不需要再重复写类似的功能。
7. 针对组件开发
-
你要做一些试图，官网提供View/Text/TextInput/ListView等组件。
-
你要做QQ和微信分享，社区里有react-native-qq、react-native-wechat组件
-
你要获取系统权限，社区有react-native-permissions组件，可以帮组我们在RN里面获取系统权限
-
比如你要做推送，激光推送官方专门维护一个react-native-jpush组件
........
三、学习React Native前需要掌握的知识
1. HTML
- 只需要知道怎么给标签设置内联样式以及设置属性，并深刻理解标签的语义化便可。
2. CSS
- 知道CSS的基本用法以及盒模型即可
3. JavaScript
- ES5、ES6需要熟练一个，ES6更好，RN现在强烈推荐ES6写法，不熟悉的可以看看阮一峰写ES6教程
4. 任意一种js开发工具
- webStorm（重量级IDE中开发RN最好的一种）
- VSCode(轻量级IDE中开发RN最好的一种)
- 两者都支持RN插件，因为VSCode是轻量级，所以推荐VSCode
5. 熟悉iOS和android的开发最好
- RN里面教难实现的功能，最后还是需要原生来做
四、React Native的项目目录介绍
- 不同的RN版本项目目录可能有些小差别，目前我们需要关注的文件夹有以下几个：
android--------------------------RN生成的android studio的android项目
iOS------------------------------RN生成的Xcode的iOS项目
node_modules---------------------RN项目使用的node模块
index.android.js-----------------android项目的入口文件
index.iOS.js---------------------iOS项目加载的入口文件
-
打开index.android.js和index.ios.js两个文件进行对比你就会发现这两个文件中的内容是一样的
-
熟悉android和iOS的同学可以打开上面提到的相应项目，将启动文件设为自己的js文件。不熟悉的同学建议大家目前不要动，后面会慢慢提到
五、React Native启动文件详解
-
RN中的组件,对应HTML中的标签
-
第十行要特别注意：如果你下面用到的组件都要首先在这里引入。
-
建议同学模拟这个写法多些几遍，熟悉一下这个RN的编码方式，这里面涉及的括号较多，写的时候要特别注意。
启动文件详解
六、补充
1. React和React Native的区别
-
React Native是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物。
-
相同点
任何一种平台框架都有两部分：UI和逻辑，对于这两种技术来说，UI都使用了JSX,而逻辑都使用了JS
-
不同点(主要在于虚拟DOM起到的作用)
-
React主要用于web开发，在运行时使用React将虚拟DOM装换成了实际DOM
-
React Native主要用于开发Android和iOS App,就是在运行时将虚拟DOM映射成Android和iOS的本地控件
-
