《React Native移动开发实战》一一1.1 看透React Native

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.1 看透React Native
  React Native(http://facebook.github.io/react-native/)第一次进入公众的视野是在2015年1月的React.js Conf(http://conf.reactjs. org/)上,随后,同年5月份,Facebook在F8 Conference(https://www. fbf8.com/)上正式宣布:React Native项目(如图1.1所示)image
在Github开源。结果一天之内,就收获了5000多颗星,受关注程度可见一斑!
?小知识:React.js Conf是指Facebook的React开发者大会,F8 Conference是指Facebook的开发者大会,Github是全球最大的软件项目托管平台,也被戏称为“人类的代码仓库”。
1.1.1 React Native与React.js
  想必读者在还没弄清React Native之前,又发现了一个“新朋友”React.js(下文简称React),那到底什么是React呢?它和React Native又是什么关系呢?
  先来看看Facebook官方(https://code.facebook.com/projects/176988925806765/react/)对React的定义:

React is a JavaScript library for building user interfaces
  从上述官方的定义可以知道:React是一个用于前端UI开发的JavaScript库。和其他类似的前端框架相比,例如,老牌的Backbone(http://backbonejs.org/)、Google推出的Angular(https://angularjs.org/)和以轻量级著称的Vue.js(http://cn.vuejs.org/),React最大的不同是提出了Virtual DOM(即虚拟DOM)的设计,可以大大提升页面渲染的效率。
?小知识:移动平台开发很好理解,即移动平台上(例如Apple的iOS平台,Google的Android平台)的软件开发,开发语言和技术主要有Objective C、Swift及Java等。而前端开发是相对于后端(又称服务器端)开发而言的,前端主要负责开发通过浏览器和用户交互的部分,开发语言和技术主要有HTML、CSS及JavaScript等。
  但是,Facebook不仅仅满足于React对前端开发技术的革新,又将React的设计移植到原生开发中,从而诞生了React + Native结合的产物,即React Native。
  虽然,React Native刚开始只支持iOS App开发,但是从2015年9月起,React Native也支持Android App开发,而且随着微软、三星等“IT大佬”的加入,React Native还将支持更多的移动平台,例如,Sansung的Tizen平台(https://www.tizen.org/)、Microsoft的Window Phone(http://microsoft.github.io/code-push/articles/ReactNativeWindows.html)。
  所以,简单来说:

  • React Native和React使用了相同的开发语言JavaScript和相同的设计理念React。
  • React Native和React运行的环境和平台却是完全不同的,React Native是基于移动平台(如iOS、Android等),而React是基于浏览器。
    ?提示:国内网络环境下访问React Native官网(http://facebook.github.io/react-native/)可能较慢,读者可以访问国内的中文资源网站,例如React Native 中文网(http://reactnative.cn/),或者自行搜索加快React Native官网访问速度的办法。

1.1.2 React Native的跨平台
  简单了解了React Native的由来之后,读者或许会有这样的疑问,开发移动平台App使用原生开发平台和语言就好了,为什么要出现使用React Native来开发移动平台App的技术呢?换句话说,React Native到底可以解决什么问题呢?
  在进一步讨论之前,笔者觉得有必要明确一下什么是原生应用和跨平台应用。
  1.原生应用
  所谓的原生应用是指:使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度,包括平台的稳定性、运行时的性能及完善的生态。
?小知识:所谓的“生态”应该算是比较抽象的概念,开发平台的生态圈包含了很多方面,从硬件上芯片和各种电子元器件的生产、供应,到软件上所使用的语言、开发工具及第三方开源库的数量质量,以及人的方面,如开发者的数量、水平等因素。
  但是,原生应用开发也不是没有任何缺点,那就是开发成本较高,导致开发效率相对较低。例如,当一个产品需要支持多种类型的移动终端时,就需要熟悉多个原生平台开发的工程师。
  2.跨平台应用
  为了解决产品满足多个平台的需求,就有了所谓的跨平台应用开发。根据实现跨平台方案的不同,也就有了以下几种常见的跨平台解决方案。

  • 混合应用开发:在移动浏览器中嵌入HTML页面来开发移动应用,代表的有Apache Cordova(http://cordova.apache.org/),以及基于Apache Cordova衍生的Inoic(http://ionicframework.com/)等,如图1.2所示。
  • 跨平台的语言:例如,基于.NET和C#的Xamarin(https://www.xamarin.com/),以及基于Ruby的RubyMotion(http://www.rubymotion.com/cn/),如图1.3所示。

        ![image](https://yqfile.alicdn.com/68645cab7150e8fbb6a4971f333ab6a299e1e54b.png)
    
  • React Native:使用的是Web开发语言(JavaScript)和环境(Node.js)。除了本书介绍的React Native之外,类似的技术方案还有NativeScript(http://www. telerik.com/nativescript)、Weex(http://weex-project.io/)等,如图1.4所示。

image

?提示:想要了解关于更多React Native的架构和原理,可以参考1.1.3节。
1.1.3 解剖React Native应用的结构
  在了解完这么多关于React Native的故事和优势之后,让我们走近React Native,来进一步了解React Native的原理和架构。
  React Native应用的整体结构如图1.5所示。

image

  通过之前的介绍和图1.5可以看出:React Native应用开发使用的是与React相同的开发语言JavaScript和设计思想React,而底层仍然是基于原生平台的。这样,不同平台的适配就交由React Native平台去处理,而开发者只需要专注于React Native平台应用开发本身,体现出的优势如下。

  • 应用层的开发变得简单、高效和跨平台。
  • 应用稳定性、运行时的性能和原生平台接近。
  • 在理解React Native原理之后,开发者也可以根据实际的产品需求开发自己的React Native组件,以复用已有原生平台的大量优秀组件。
相关文章
|
6月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
101 2
|
6月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
235 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
127 1
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1841 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
107 2
|
6月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
5月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
71 0