首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

怎么理解React Native的新架构?

旧架构设计 在了解新架构前,我们还是先聊下目前的 React Native 框架的主要工作原理,这样也方便大家了解整体架构设计,以及为什么 Facebook 要重构整个框架: ReactNative 是采用前端的方式及...Fabric:依赖 JSI 的设计,并将旧架构下的 shadow tree 层移到 C++ 层,这样可以透过 JSI,实现前端组件对 UI 组件的一对一控制,摆脱了旧架构下对于 UI 的异步、批量操作。...原有 JS 与 Native 的数据沟通,更多的是采用 JSON 和基础类型数据,但有了 JSI 后,数据类型更丰富,支持 JSI Object。...当然 Facebook 早已经想到了这个问题,所以在设计 JSI 的时候,就提供了一个 codegen 模块,帮忙大家完成基础代码和环境的搭建,以下我们会简单为大家介绍怎么使用 JSI。...Fabric Fabric 是新架构的 UI 框架,和原有 UImanager 框架是类似,前面章节也说明 UIManager 框架的一些问题,特别在渲染性能上的瓶颈,似乎基于原有架构已经很难再有优化,

2K20

React Native 新架构

主要有JSI、Fabric、TurboModules、CodeGen、LeanCode组成。 JSI JSI是整个架构的核心和基石,所有的一切都是建立在它上面。...JSI是Javascript Interface的缩写,一个用C++写成的轻量级框架,它作用就是通过JSI,JS对象可以直接获得C++对象(Host Objects)引用,并调用对应方法。...有了JSI,JS和Native就可以直接通信了,调用过程如下: JS->JSI->C++->ObjectC/Java 自此三个线程通信再也不需要通过Bridge,可以直接知道对方的存在,让同步通信成为现实...之前RN框架启动的时候会加载所有Native模块,导致启动慢,时间久。现在有了TurboModules后,可以实现按需加载,减少启动时间,提高性能。...具体的进度可以参考Fabric进度讨论和 TurboModules进度讨论和JSI进度讨论和CodeGen进度讨论,以及React官方源码 目前RN的新架构正在紧张的重构中,比预定的时间表晚了一点,比较期待新框架的发布和表现

1.7K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ⏱ React Native 启动速度优化——Native 篇(内含源码分析)

    Java、C++、JavaScript 四门语言,我尽量讲得通俗易懂一些,若实在不理解可以直接看结论 0.React Native 启动流程 React Native 作为一个 Web 前端友好的混合开发框架...JSI JSI 的全名是 JavaScript Interface,一个用 C++ 写的框架,作用是支持 JS 直接调用 Native 方法,而不是现在通过 Bridge 异步通讯。...React Native 新架构中的 JSI,主要就是起这个作用的,借助 JSI,我们可以用 JS 直接获得 C++ 对象的引用(Host Objects),进而直接控制 UI,直接调用 Native...__sampleJSIObject.method1(),这个方法就会被调用 jsi::Value TurboModule::get(jsi::Runtime& runtime, const jsi::PropNameID...,最后返回一个对应的 JSI 对象 现在我们得到了 SampleTurboModule 的 JSI 对象,就可以用 JavaScript 同步调用 JSI 对象上的属性和方法 通过上面的步骤,我们可以看到借助

    1.8K10

    React Native 启动速度优化 从Native方便着手

    Java、C++、JavaScript 四门语言,我尽量讲得通俗易懂一些,若实在不理解可以直接看结论 0.React Native 启动流程 React Native 作为一个 Web 前端友好的混合开发框架...JSI JSI 的全名是 JavaScript Interface,一个用 C++ 写的框架,作用是支持 JS 直接调用 Native 方法,而不是现在通过 Bridge 异步通讯。...React Native 新架构中的 JSI,主要就是起这个作用的,借助 JSI,我们可以用 JS 直接获得 C++ 对象的引用(Host Objects),进而直接控制 UI,直接调用 Native...__sampleJSIObject.method1(),这个方法就会被调用 jsi::Value TurboModule::get(jsi::Runtime& runtime, const jsi::PropNameID...,最后返回一个对应的 JSI 对象 现在我们得到了 SampleTurboModule 的 JSI 对象,就可以用 JavaScript 同步调用 JSI 对象上的属性和方法 通过上面的步骤,我们可以看到借助

    2K40

    React Native迎来重大架构升级,性能将大幅提升

    React Native 新架构包括三个关键部分:JSI 、TurboModules 和 Fabric。JSI 全称是 JavaScript Interface,代替的是原来的 Bridge。...得益于 JSI,JavaScript 可以直接调用 Native 模块的方法。类似于在浏览器中,JavaScript 调用获取经纬度方法,实际调用的是 C++ 底层的获取方法。...目前,JSI 和 TurboModules 部分已经可以使用,Fabric 部分还要等上一段时间。此外,在新架构的生态方面,比如导航、动画等,估计会有很多变化。...InfoQ:从你视角看,决定跨端框架发展的关键因素是什么?跨端和原生的解决方案之间,未来会是一种怎么样的动态平衡? 蒋宏伟:跨端框架发展的关键因素是净收益的大小。...从框架使用者的角度讲,生态起不来的,比如 Weex、NativeScript,开发成本太高,净收益可能为负的,这也会反过来制约框架的发展。

    1.6K20

    2022 年 React Native 的全新架构更新

    通用层代表着:JSI 让 JavaScript 接口将与 Engine 分离,这意味着新架构支持 RN 直接使用其他 JavaScript 引擎,比如 Chakra、v8、Hermes 等等。...那 JSI 如何让 JavaScript 直接调用到原生方法?...在 JSI 里 Native 方法会通过 C++ Host Objects 暴露给 JS, 而 JS 可以持有对这些对象的引用,并且使用这些引用直接调用对应的方法。...JSI 就是以类似的方式运行,JSI 将允许 JS 代码保存对 Native Modules 的引用,并且 JS 可以直接通过引用去调用 Native 上的方法。...image 总结起来就是: JSI 将支持其他 JS 引擎; JSI 允许线程之间的同步相互执行,不需要 JSON 序列号等耗费性能的操作; JSI 是用 C++ 编写,以后如果针对电视、手表等其他系统

    2.1K20

    React Native之新架构中的Turbo Module实现原理分析

    一、简介 Turbo Modules是升级版的Native Modules,是基于JSI开发的一套JS与Native交互的轻量级框架,用来解决在使用Native Modules时遇到的问题。...JSI&引擎层:自定义Turbo Modules需要实现JSI相关方法,可以将JSI相关方法与OC/Java方法进行映射,而这一步相关的方法也是由CodeGen自动生成。...,其中主要功能是使用methodMap将JS中的方法与JSI对应的方法实现进行关联。...该方法有一个类型为facebook::jsi::Value的返回值(Value是JS相关数据类型在JSI中的一个映射,JSI中关于Value的解释:Represents any JS Value (undefined...当然官方没有明确给出Turbo Modules在桥调用过程中速度更快,而说Turbo Modules在加载过程中会有一些优化,并且基于JSI实现的,JS可直接通过JSI调用OC方法。

    5.7K20

    React Native 架构演进

    P.S.目前(2019/9/8)除已完成的 JSI 外,其余重构计划仍在进行中,具体见The New React Native Architecture Explained: Part Four 三.增强...四.引入 JSI ? 上层 JavaScript 代码需要一个运行时环境,在 React Native 中这个环境是 JSC(JavaScriptCore)。...不同于之前直接将 JavaScript 代码输入给 JSC,新的架构中引入了一层 JSI(JavaScript Interface),作为 JSC 之上的抽象,用来屏蔽 JavaScript 引擎的差异...,允许换用不同的 JavaScript 引擎(如最近推出的Hermes) 更重要的,有了 JSI 之后,JavaScript 还能持有 C++对象的引用,并调用其方法: By using JSI, JavaScript...具体的,直接在 C++层创建 JavaScript 与 Native 共享的 Shadow Tree,并通过 JSI 层将 UI 操作接口暴露给 JavaScript,允许 JavaScript 直接控制高优先级的

    1.6K21

    腾讯开源跨端框架Hippy 3.0在腾讯视频的升级实践

    02、腾讯视频搜索在 Hippy 2.0 框架上遇到的问题 腾讯视频搜索业务是基于 Hippy 2.0 框架进行开发的。...Hippy 3.0 框架在今年7月份已经对外发布,通过跟 Hippy 框架团队进行沟通,了解到很多 Hippy 3.0 的新特性,优化升级能够帮助解决 Hippy 2.0 框架使用上遇到的问题,于是我们立马制定了...2)接入 JSI,通过 JSI 来调用 JSAPI,提升页面性能 我们在对页面性能进行分析的时候,发现很多 JSAPI 调用比较耗时,特别是对页面渲染有依赖的 JSAPI,如果它耗时比较久,会影响到页面的渲染耗时...Hippy JSI(JavaScript Interface)模式提供了一种无需经历编解码(序列化)过程的跨 VM 互相调用的解决方案,使得 JS 可以和 Native 客户端直接通信,并且可以定义接口为串行的调用方式...我们在本地对同一个 JSAPI 接口分别进行正常的 JSBridge 调用和 JSI 调用,分别测试5次取平均数,对比数据发现,对 JSAPI 通过 JSI 方式调用,比进行正常的 JSBridge 调用

    75830

    原来 React Native 已经如此成熟了

    新的 JavaScript 引擎 Hermes JavaScript 是一门运行时框架。它的解析、编译、执行都发生在程序运行的过程中。...新的通信方式 JSI 的出现解决了通信成本高的问题。 JSI 是一个基于 C++ 编写的轻量级通信工具,他最厉害的地方就是能够让 JS 直接调用 native 的方法。...新的 UI 渲染引擎:Fabric 得益于 JSI 能够直接调用 native 层的方法,新的渲染引擎使用 c++ 实现了核心渲染系统。...上手即用的完整应用层框架:Expo 上面我分享的这些都比较偏底层,更多的是他们在性能上带来了非常大的提高。 Expo 则是在开发体验上带来的巨大提升。...Expo 已经发展成为了生态完整,上手即用的成熟框架。他对系统级的能力支持也非常完整,对于开发的门槛要求也变得非常低。 除此之外,它提供的沙箱能力,也能够低成本让你在真机调试自己开发的应用。

    29620
    领券