首页 > 其他分享 >重构即将完成!2020版React Native会有多大改善?

重构即将完成!2020版React Native会有多大改善?

时间:2022-11-26 01:22:23浏览次数:38  
标签:原生 JavaScript React 线程 模块 2020 Native

全文共1601字,预计学习时长6分钟

图源:unsplash

2015年,React Native被首次推出,使用ReactJS框架开发原生跨平台应用程序。该框架获得了社区的大力支持,并凭借其Web同行的名声逐渐普及,但其实该平台的原始设计并非没有缺点。

2018年,Facebook团队宣布他们正试图解决多年来开发人员遇到的这些最常见问题,进行ReactNative重构。这样的重构改善体现在哪些方面呢?本文将从性能和开发速度方面来谈一谈。

原构造

ReactNative曾被称作“不依赖于平台”的应用框架。从某种程度上讲,该框架的主要目标是让开发人员编写Javascript React代码,而React Native可以在幕后部署其机制,以将Reactreconciliation tree转录成可由原生基础设施解释的内容。它能够:

· 正确显示UI

· 访问原生功能

通常,Android/ iOS生态系统目前的机制如下所示:

选自Lorenzo S.的演讲

每个React Native应用程序中运行着3个并行线程:

· 阴影线程用来设计布局。它使用Facebook自带的Yoga布局引擎来设计flexbox布局并将其发送回UI线程。

· JS线程读取和编译所有JavaScript代码以及执行应用程序大部分业务逻辑。将所有Javascript代码融汇到一个文件中,并翻译任何其他Javascript语法(例如JSX或TS),然后将此代码发送到JavaScriptCore引擎以便运行。

· 原生线程是运行原生代码的位置。每当需要更新UI或访问本机函数时,它将与JS线程连接。它分为原生UI和原生模块。原生模块在启动时都处于预备状态,这意味着即使ReactNative使用蓝牙模块,该蓝牙模块也始终处于运行状态。

图源:unsplash

使用桥接器可以连接JS线程和原生线程,在后台,C++模块围绕一个异步队列构建。每当它从任一方获取数据时,都会将数据序列化为字符串并将其通过队列传递,并在到达时反序列化。

这意味着所有线程都依赖于跨网桥传输的异步JSON消息,并且这些消息发送到任一端,期望它们在将来的某个时间引发响应,但它还存在拥塞的风险。

每当浏览者在原生环境中拖动滚动条时,信息都会异步发送到JavaScript领域,但是原生环境不会等待Java脚本执行工作并将其以另一种方式发送回去。这会造成延迟,屏幕上出现信息之前会一片空白。

同样,布局设计需要经过很多次才能在屏幕上显示,因为在原生设计布局之前,它需要想尽办法到达Yoga引擎,当然这也意味着要通过桥接器。可以看到异步序列化来回发送JSON数据是怎样造成性能问题的,但是如何使JavaScript与本机通信呢?这就要靠JSI发挥作用了。

新架构

重构版的ReactNative将逐渐弃用桥接器,转而采用新元素——JavaScript接口(JSI)。JSI的一些改进令人惊喜,首先就是JS软件包不再依赖JSC。换句话说,现在可以轻松地将JSC引擎与其他(可能更高性能的)JavaScript引擎互换,例如V8。

第二个改进针对的是这种新架构的基础:“通过使用JSI,JavaScript可以保存对C++主机对象的引用并对其调用方法。JavaScript和原生领域将真正彼此了解。”

这也意味着JSI将允许所有线程之间完全互操作。通过共享所有权,JavaScript代码可以直接从JS线程运行原生方法,不需要将要传递的消息序列化为JSON,这消除了桥接器上的所有拥塞和异步问题。

除了显著改善不同线程之间的通信之外,这种新架构还可以直接控制原生模块。这意味着我们可以在需要时使用原生模块,而不是在启动时将它们全部引导一次。这大大提高了性能,节省了启动时间。

在掌握了C ++的强大功能的基础上,懂得如何将React Native用于定位非常大的系统面板是很容易的。

推出这么多年,ReactNative已过时、待清理、需维护的部分已经积攒很多了,React Native框架已经清除了某些功能,诸如Webview或AsyncStorage之类的模块正逐渐从React Native核心中移出,将转变为社区管理的存储库。

图源:unsplash

凭借新的精简核心模块以及JavaScript代码与原生代码之间强大的互操作性机制,React Native重构将实现许多性能改进和更全方位的开发人员工作流。它计划在2020年第四季度之前完成全面重组,更好的性能和全新开发体验十分令人期待。

 

标签:原生,JavaScript,React,线程,模块,2020,Native
From: https://www.cnblogs.com/sexintercourse/p/16926796.html

相关文章

  • react hook 学习笔记
    React提供的Hooks其实非常少,一共只有10个,比如useState、useEffect、useCallback、useMemo、useRef、useContext等等。这一讲我们会先学习useState和useEffect这......
  • 关于react-native init 创建项目报错 cli.init is not a function 问题解决
    1.在react-nativeinitappDemo创建项目时,报错TypeError:cli.initisnotafunction.2.解决:产生这个问题的原因是:使用这种方式创建工程,react-native版本是0.69版本......
  • node-webki NATIVE UI API概览
    3.1 NATIVEUIAPI概览NativeUIAPI,是提供了在代码中访问、控制应用程序界面显示的接口。和使用node.js模块类似,想要访问node-webkit的NativeUIAPI,需要先加载“nw.gui......
  • AT_hitachi2020_c ThREE
    AT_hitachi2020_cThREE简单构造题,考虑题目给个限制,那么就是不能存在\(i,j\),\(i\)到\(j\)的距离为\(3\)且\(p_i\equivp_j\pmod3\)且\(p_i,p_j\)不为\(3\)的倍数。......
  • [NEFU ACM] 2020级暑期训练 解题报告
    [NEFUACM]2020级暑期训练解题报告Author:2020-计6-zslID:FishingRod阅读须知需求指向:NEFU2020级ACM暑期训练参与人员解题报告博客偏向题解代码展示,解题视频偏向思路讲解......
  • Waves Complete 11 for Mac(Waves全套混音插件包) v2020.11.12 完美激活版
    WavesCompleteformac是一款强大的音乐创作工具,含有各种混音插件,从运行速度到插件调用,性能和速度都大大提升,从混响,压缩,降噪和EQ到模拟硬件,环绕和后期制作工具,深受艺术家们......
  • UseIconfontInReact
    1.获取当前icon库2.全局文件index.html添加对iconfont的支持head标签中添加以下代码<scriptsrc="./iconfont.js"></script><style>.icon{......
  • react在组件中获取 dom
    使用16版本后的createRef()函数classMyComponentextendsReact.Component<iProps,iState>{constructor(props){super(props);this.inputRef=Reac......
  • 用NetCore + ReactJS 实现一个前后端分离的网站 (3) 仓储、服务层的实现以及数据库接
    用NetCore+ReactJS实现一个前后端分离的网站(3)仓储层的实现1.前言这两天在仓储模式上纠结了几回,差点放弃仓储层的实现,因为从网上搜到一些文章,说efcore已经是按照......
  • webflux reactive-feign 分页的实现
    生产者respositorypackagecom.fengyun.medical.productservice.repositories;importcom.fengyun.medical.domain.Handbook;importorg.springframework.data.do......