一、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的本地控件
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的本地控件