React Native02 - 基础介绍

前言

本篇内容目前还是不涉及敲代码,主要涉及到的内容如下所示:

  • React Native的由来
  • React Native的优势
  • 学习React Native前需要掌握的知识
  • React Native项目目录介绍
  • React Native启动文件详解
  • 补充

一、React Native的由来

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

  2. React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物(文章最后说到RN和React的区别),目前支持iOS和安卓两大平台。RN的业务逻辑使用Javascript语言编写UI用的是类似于XML的JSX和CSS

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

二、React Native的优势

1. 使用虚拟DOM(Virtual DOM)来更新页面
  • 更新原理

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

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

    3. 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的本地控件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容