searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

React Native介绍及原理浅析

2023-06-28 08:51:53
19
0

什么是 React Native?

React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:Learn Once,Write Anywhere。

React Native 的特点:

1.跨平台,React Native 使用了 Virtual DOM(虚拟 DOM),只需编写一套代码,便可以将代码打包成不同平台的 App,极大提高了开发效率,并且相对全部原生开发的应用来说,维护成本也相对更低。

2.上手快,相比于原生开发,JavaScript 学习成本低、语法灵活。允许让 Web 开发者更多地基于现有经验开发 App。React Native 只需使用 JavaScript 就能编写移动原生应用,它和 React 的设计理念是一样的,因此可以毫不夸张地说:你如果会写 React,就会写 React Native!

3.原生体验,由于 React Native 提供的组件是对原生 API 的暴露,虽然我们使用的是 JavaScript 语言编写的代码,但是实际上是调用了原生的 API 和原生的 UI 组件。因此,体验和性能足以媲美原生应用。

4.热更新,React Native 开发的应用支持热更新,因为 React Native 的产物是 bundle 文件,其实本质上就是 JS 代码,在 App 启动的时候就会去服务器上获取 bundle 文件,我们只需要更新 bundle 文件,从而使得 App 不需要重新前往商店下载包体就可以进行版本更新,开发者可以在用户无感知的情况下进行功能迭代或者 bug 修复。但是值得注意的是,AppStore 禁止热更新的功能中有调用私有 API、篡改原生代码和改变 App 的行为。

现在,我们看下React Native的架构图:

如架构图所示,在 React Native 中,原生端和 JavaScript 交互是通过 Bridge 进行的,Bridge 的作用就是给 React Native 内嵌的 JS Engine 提供原生接口的扩展供 JS 调用。所有的本地存储、图片资源访问、图形图像绘制、3D 加速、网络访问、震动效果、NFC、原生控件绘制、地图、定位、通知等都是通过 Bridge 封装成 JS 接口以后注入 JS Engine 供 JS 调用。理论上,任何原生代码能实现的效果都可以通过 Bridge 封装成 JS 可以调用的组件和方法, 以 JS 模块的形式提供给 RN 使用。

 

从架构图中可以看出 Javascript 在 react native 里面非常重要,体现在:

1.它负责管理 Ul component 的生命周期,管理 Virtual DOM

2. 所有业务逻辑都是用 javascript 来实现或者衔接

3.调用原生的代码来操纵原生组件实现UI

 

但是Javascript 本身是无绘图能力的,它是如何实现UI界面的?react native 自己实现的一套 UI 控件(两套, android 一套, ios 一套),如上3所说都是通过给原生组件发指令来完成的,所以UI界面本质还是原生应用,而不是网页之类的,所以流畅度接近原生应用。

0条评论
0 / 1000
海洋
3文章数
0粉丝数
海洋
3 文章 | 0 粉丝
海洋
3文章数
0粉丝数
海洋
3 文章 | 0 粉丝
原创

React Native介绍及原理浅析

2023-06-28 08:51:53
19
0

什么是 React Native?

React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:Learn Once,Write Anywhere。

React Native 的特点:

1.跨平台,React Native 使用了 Virtual DOM(虚拟 DOM),只需编写一套代码,便可以将代码打包成不同平台的 App,极大提高了开发效率,并且相对全部原生开发的应用来说,维护成本也相对更低。

2.上手快,相比于原生开发,JavaScript 学习成本低、语法灵活。允许让 Web 开发者更多地基于现有经验开发 App。React Native 只需使用 JavaScript 就能编写移动原生应用,它和 React 的设计理念是一样的,因此可以毫不夸张地说:你如果会写 React,就会写 React Native!

3.原生体验,由于 React Native 提供的组件是对原生 API 的暴露,虽然我们使用的是 JavaScript 语言编写的代码,但是实际上是调用了原生的 API 和原生的 UI 组件。因此,体验和性能足以媲美原生应用。

4.热更新,React Native 开发的应用支持热更新,因为 React Native 的产物是 bundle 文件,其实本质上就是 JS 代码,在 App 启动的时候就会去服务器上获取 bundle 文件,我们只需要更新 bundle 文件,从而使得 App 不需要重新前往商店下载包体就可以进行版本更新,开发者可以在用户无感知的情况下进行功能迭代或者 bug 修复。但是值得注意的是,AppStore 禁止热更新的功能中有调用私有 API、篡改原生代码和改变 App 的行为。

现在,我们看下React Native的架构图:

如架构图所示,在 React Native 中,原生端和 JavaScript 交互是通过 Bridge 进行的,Bridge 的作用就是给 React Native 内嵌的 JS Engine 提供原生接口的扩展供 JS 调用。所有的本地存储、图片资源访问、图形图像绘制、3D 加速、网络访问、震动效果、NFC、原生控件绘制、地图、定位、通知等都是通过 Bridge 封装成 JS 接口以后注入 JS Engine 供 JS 调用。理论上,任何原生代码能实现的效果都可以通过 Bridge 封装成 JS 可以调用的组件和方法, 以 JS 模块的形式提供给 RN 使用。

 

从架构图中可以看出 Javascript 在 react native 里面非常重要,体现在:

1.它负责管理 Ul component 的生命周期,管理 Virtual DOM

2. 所有业务逻辑都是用 javascript 来实现或者衔接

3.调用原生的代码来操纵原生组件实现UI

 

但是Javascript 本身是无绘图能力的,它是如何实现UI界面的?react native 自己实现的一套 UI 控件(两套, android 一套, ios 一套),如上3所说都是通过给原生组件发指令来完成的,所以UI界面本质还是原生应用,而不是网页之类的,所以流畅度接近原生应用。

文章来自个人专栏
前端图书馆
3 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0