React Native与React的关系及特点

Posted ybchengxumin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native与React的关系及特点相关的知识,希望对你有一定的参考价值。

一、React、React.js和React Native的关系

React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。

在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用。

因为React基础框架与React.js框架是同时出现、同时进化发展的,就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。

后来,Facebook推出React Native后,也没有把React的相关概念文档从React.js文档中分离出来,就导致了学React Native要去看React.js文档。

二、React Native开发特点

1、一次学习,随处编写;

使用React Native可以为iosandroid操作系统开发应用程序,不同平台上的代码根据平台会有一些微小的区别。

2、混合开发

React Native代码开发的模块与原生代码开发的模块可以双向通信、无缝衔接;
混合开发可以分为3种情况:

  • 通用的UI界面与业务逻辑由React Native开发,但与手机平台紧密关联的处理由原生代码来执行;
  • 将原来使用原生代码实现的UI小部件包装成React Native的自定义组件;
  • 应用界面在React Native开发的界面与原生代码开发的界面间切换;

3、高效的移动应用开发

使用RN开发移动应用,绝大部分UI界面与业务逻辑都是一套代码。使用React Native开发移动应用的UI界面比使用原生语言快捷高效,业务逻辑处理部分开发效率与开发原生代码相仿。

UI开发是React Native的强项的主要体现:

(1)独特的UI实现框架

React重新思考了UI开发过程,并且提出了一套全新的、高效的框架。React Native官网描述的出发点:用于开发数据不断变化的大型应用程序。

(2)组件化开发

React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

(3)跨平台移植代码迅速

使用React Native进行UI开发时,开发者通常是先在一个操作系统上开发,然后用这套代码去另一个操作系统中添加适配代码,做到一份代码在两个平台运行。

(4)自动匹配不同屏幕大小的手机

使用React Native开发,开发者无须为不同的屏幕分辨率准备不同的图片资源或者布局文件甚至可以不考虑屏幕大小的问题,通过灵活的布局方式,React Native可以做到在不同的手机屏幕上高效、清晰的UI呈现。

4、高效的移动应用开发调试

使用React Native开发,修改了代码后立刻可以在手机上看到效果,没有重新编译启动程序所需要的时间。

5、灵活高效的应用热更新

开发者可以在用户基本无感知的情况下加入新界面、新功能与新的业务逻辑。

6、有效降低移动应用安装包体积

移动应用功能越复杂,RN安装包相比原生代码安装包就越小。

7、学习门槛低、开发难度低

(1)开发语言简单

React Native使用ES6语言,以及自创的JSX语言进行的开发。

(2)语法接近自然语言

React Native开发中的函数名、变量名都采用类似于自然语言的命名法,便于记忆,语言的含义基本上可以直接推断与理解。

(3)积木式UI开发

不论是设计还是实现,通过React Native框架都能做到结构清晰、开发难度低、可读性高、后期修改维护方便。

8、开发硬件要求低

React Native开发用的软件都是可免费下载、安装使用的正版软件,部分是开源软件,对硬件要求也不高。

9、使用React Native开发的代价

为了得到React Native开发的优点,使用React Native开发的APP也需要付出一定的代价。

(1)内存消耗大

使用React Native开发的程序运行所需的内存比原生代码开发的程序略多。

(2)运行速度

使用React Native开发的代码运行速度比原生代码略慢。

 

以上是关于React Native与React的关系及特点的主要内容,如果未能解决你的问题,请参考以下文章

“flux”和“redux”与“react native”有啥关系?新的“react native”应该开始使用其中的哪一个?

为啥 react-native start 命令停留在“加载依赖关系图,完成”上。

前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

react-native 横竖屏控制及状态变化监听