前言
本篇内容目前还是不涉及敲代码,主要涉及到的内容如下所示:
- 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的本地控件