react-naive工作原理

news2024/10/5 20:12:22

react-naive工作原理是从react的工作原理衍生出来的

react的工作原理

在react中,virtual dom 就像一个中间层,介于开发者描述的视图与实际在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面,开发者必须操作浏览器的Dom,这个操作代价昂贵,过度操作dom会给性能带来影响。React 维护了一个内存版本的 DOM,通过计算得出必要的最小操作并重新渲染。如下图:

执行 vdom 的计算(dom diff),减少浏览器DOM的重复渲染
对于 Web 环境的react而言,大多数开发者认为 virtual dom 的出现主要是为了优化性能。vdom确实能提升性能,但它的主要潜力在于提供了强大的抽象能力。在开发者的代码与实际的渲染之间加入一个抽象层,这带来了很多可能性。稍微想象一下,如果react能够渲染到浏览器以外的其他平台呢?毕竟,react已经“理解”了你的应用应该如何展现。

React Native 的工作原理

如下图,这就是 React Native 的工作原理。 react native 调用Objective-C的API去渲染iOS组件,调用Java接口去渲染Android组件,而不是渲染到浏览器的DOM上,这使得react native 不同于那些基于web视图的跨平台应用开发方案(各种小程序 uniapp\taro , 适配器转化)。

react可以渲染到多个平台

Bridge"桥接"使这一切成为可能,它使得react可以调用宿主平台开放的UI组件。react组件通过render方法返回了描述界面的标记代码。

  1. web平台: react最终将标记代码解析成浏览器的dom

  2. react native中:标记代码会被解析成特定平台的组件

    1. <View>组件将会表现为iOS平台的UIView

react native 目前同时支持iOS和Android两种平台。由于virtual DOM提供了抽象层,react native也可以支持其他平台,只需要提供“桥接”即可。

react 和 react native 的不同点

框架作用的平台不同

RN是由React衍生出来的,两种框架都是用JSX开发语法,但是RN是用来开发真正原生渲染的iOS和Andriod移动应用的JS框架,而React是将浏览器作为渲染平台。

工作原理不同

上面总结的工作原理

渲染周期

react 组件挂载过程 -> 重新渲染过程。

  1. React的渲染周期开始于react组件挂载到DOM之后,接着React进入渲染周期并根据需要渲染组件。在渲染阶段,React将开发者在return中返回的HTML标记直接按需渲染到页面上

  2. React Native生命周期与React基本相同,在渲染上因为React Native依赖于桥接,并不在UI主线程运行,它可以在不影响用户体验的前提下执行这些异步调用。

创建组件

当编写Web环境的React的时候,视图最终需要渲染成普通的HTML元素;

而在React Native中,所有元素都会被平台指定的React组件替换,例如在iOS中,<View>组件被渲染成UIView,而在Android平台,会被渲染成View

原生的样式

在Web中,使用CSS样式为React组件添加样式已经是开发过程中不可获取的一部分了。React通常不影响我们编写CSS的方式,并且它确实让样式的动态创建更加容易(通过state和props),除此之外,React基本上不关心我们如何处理样式的。
非Web平台上有大量的方法来处理布局和样式.

我们使用React Native时,只需要用一种标准的方法来处理样式,React和宿主平台之间的桥接包含了一个缩减版CSS子集的实现,这个CSS子集主要通过flexbox进行布局,做到了尽量简化,而不是去实现所有的CSS规则。有别于Web平台,CSS的支持程度因浏览器而不同,React Native则做到了样式规则的一致。

宿主平台接口

数据存储、地理服务、操控硬件设备


我是 甜点cc

公众号:【看见另一种可能】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/554882.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统分析师经典易错题,解题思路三

UML2.0包括14种图:分别如下:类图(class diagram),类图描述了一组类、接口、协作和他们之间的关系。在OO系统的建模中,最常见的图就是类图。类图给出了系统的静态设计视图,活动图的类图给出了系统的静态进程视图。对象图(object diagram)对象图描述了一组对象及它们之间…

linux centos 安装JDK、tomcat、nginx教程记录

一、安装jdk 1、查看linux系统的jdk位数&#xff08;64/32位&#xff09; 查看本机位数命令&#xff1a; sudo uname --m 2、进入jdk下载官网 Java Downloads | Oracle 现在默认是最新的jdk20 以为我是之前的项目&#xff0c;使用的是jdk1.8_181版本&#xff0c;所以我需要…

零基础自学网络安全/web安全,看这一篇就够了

作为一个安全从业人员&#xff0c;我自知web安全的概念太过于宽泛&#xff0c;我本人了解的也并不够精深&#xff0c;还需要继续学习。 但看到这个问题之后又想说说自己的看法&#xff0c;所以今天随手写写关于web安全的内容&#xff0c;希望对初次遇到web安全问题的同学提供帮…

Cadence+SPB16.2入门教程(上)

第1章焊盘制作 1.1用Pad Designer制作焊盘 Allegro中制作焊盘的工作叫Pad Designer,所有SMD焊盘、通孔焊盘以及过孔都用该工具来制作。 打开程序->Cadence SPB 16.2->PCB Editer utilities->Pad Designer,弹出焊盘制作的界面,如图1.1所示。 在Units下拉框中选择…

【CloudCompare教程】005:点云滤波处理大全

本文讲述基于cloudcompare软件的点云滤波方法及案例,包括:高斯滤波、低通滤波、双边滤波、统计滤波、CSF地面滤波等等。 文章目录 一、高斯滤波二、低通滤波三、双侧滤波四、统计滤波五、CSF地面滤波滤波(Wave filtering)是将信号中特定波段频率滤除的操作,是抑制和防止干…

5月22号软件资讯更新合集.....

DHorse v1.1.1 发布&#xff0c;基于 k8s 的发布平台 综述 DHorse 是一个简单易用、以应用为中心的云原生 DevOps 系统&#xff0c;具有持续集成、持续部署、微服务治理等功能&#xff0c;无需安装依赖 Docker、Maven、Node 等环境即可发布 Java 和 Node 应用&#xff0c;主要…

Telnet远程登录设备管理

Telnet远程登录原理 为了方便通过命令管理设备,可以使用Telnet协议对设备进行管理。 Telnet协议与使用Console接口管理设备不同,无需专用线缆直连设备的Console接口,只要IP地址可达、能够和设备的TCP 23端口通信即可。 支持通过Telnet协议进行管理的设备被称为Telnet服务器…

你还不知道~~这个是什么意思吗,还以为是作者写错了

文章目录 前言一、来个例子二、按位非~三、小知识 前言 主要是来学习一下js中运算符的相关的知识 一、来个例子 ~~(Math.random() * 10)看起来像是要获取随机数的。 我们先把括号内的东西粘到控制台看看&#xff1a; 结果&#xff1a; (Math.random() * 10) //4.47062635057…

面试冲冲冲

目录 一、数据库MYSQL 1.1 Oracle与Mysql的区别 1.2 Mysql索引 1.3 Mysql事务 1.4 Mysql存储引擎 1.5 B树 1.6 锁 1.7 优化 一、数据库MYSQL 1.1 Oracle与Mysql的区别 Oracle与Mysql的区别_oracle和mysql区别_顾优秀的博客-CSDN博客 浅谈MySQL和Oracle的区别_oracle…

都说聚合配送好,它到底能解决哪些同城配送难题?

自外卖经济兴起以来&#xff0c;即时配送一直呈现爆炸式增长。与该领域相关的商家、平台、骑手、用户数量和订单数量&#xff0c;也在保持着快速增长。其服务类别已从外卖扩展到人们生活的各个方面&#xff0c;需求增量稳步增长。 市场配送渠道虽多 配送问题仍是大难题 到目…

淘宝618活动节奏指南

一年一度的618活动又要开始啦&#xff0c;今天跟大家分享的是618活动时间节点&#xff0c;以及活动预热&#xff0c;活动期间&#xff0c;以及活动结束之后咱们应该做哪些事情。 这个是今年618活动的一个时间节点&#xff0c;和往年一样&#xff0c;主要分为预售&#xff0c;开…

代码随想录算法训练营day48 | 198.打家劫舍,213.打家劫舍II,337.打家劫舍III

代码随想录算法训练营day48 | 198.打家劫舍&#xff0c;213.打家劫舍II&#xff0c;337.打家劫舍III 198.打家劫舍解法一&#xff1a;动态规划 213.打家劫舍II解法一&#xff1a;分别掐头和去尾&#xff0c;动态规划 337.打家劫舍III解法一&#xff1a;树的递归遍历动态规划 总…

基于IF的网站异常流量检测

基于IF的网站异常流量检测 小P&#xff1a;最近渠道好多异常数据啊&#xff0c;有没有什么好的办法可以识别这些异常啊 小H&#xff1a;箱线图、 3 σ 3\sigma 3σ 都可以啊 小P&#xff1a;那我需要把每个特征都算一遍吗&#xff1f;不是数值的怎么算啊&#xff1f; 小H&#…

【2023年4月美赛加赛】Y题:Understanding Used Sailboat Prices 三篇完整论文及代码

【2023年4月美赛加赛】Y题&#xff1a;Understanding Used Sailboat Prices 建25页完整论文及代码 1 题目 2023年MCM 问题Y:理解二手帆船价格 和许多奢侈品一样&#xff0c;帆船的价值也会随着年代和市场条件的变化而变化。所附的“2023_MCM_Problem_Y_Boats.xlsx”文件包括2…

【dfn序+DP】树

把一棵树转化成一个序列有三种方法&#xff1a; dfs序 dfn序&#xff08;时间戳&#xff09; 欧拉序 关于这三者的区别&#xff0c;参考这篇博客&#xff0c;讲的超级好&#xff01; 重谈DFS序、时间戳和欧拉序 - Seaway-Fu - 博客园 (cnblogs.com) 题意&#xff1a; 思路…

【SpringBoot】七:Web服务---Servlet Filter Listener

文章目录 1.Servlet1.1 使用WebServlet创建Servlet1.2 使用编码方式创建Servlet 2.Filter2.1 使用WebFilter创建Filter2.2 使用编码方式创建Filter2.3 Filter排序2.4 使用框架中的 Filter 3. Listener 1.Servlet 1.1 使用WebServlet创建Servlet (1)编写servlet WebServlet(…

数仓建模理论

一、数仓建模理论 &#xff08;一&#xff09;前言 数仓建模就好比是图书馆的书能够分门别类的存放&#xff0c;不仅合理&#xff0c;齐全&#xff0c;而且易于查找。 数据模型就是数据组织和存储方法&#xff0c;强调从业务、数据存取和使用角度合理存储数据。只有将数…

数据结构课程设计——航空客运订票系统

航空客运订票系统 一、引言 1.1 问题的提出 随着时代的发展&#xff0c;智能化生产给社会带来方便与精确&#xff0c;本系统以方便大众&#xff0c;妥善管理机场票务操作为基旨而开发。 本程序以数据结构&#xff08;c语言描述)存储结构进行开发。利用单链表等存储方式为基础…

字节技术面都过了,薪资都谈好了20K*13结果还是被刷了,问HR,原因是。。

面试被拒开端 分享下自己的求职小故事。在一家公司软件测试技术面试已经过了&#xff0c;然后和最终面试官沟通了下&#xff0c;面试官提出来一个薪资数字&#xff0c;我接受了这个提议并和hr同步了这个数字。再然后被拒了&#xff0c;理由就是期望薪资和职级不匹配。我询问后…

鸿蒙元服务万能卡片开发-stage模型和fa模型的卡片区别

一、项目类型 Application&#xff1a; 应用开发 Atomic Service&#xff1a;原子化服务开发 这里选择Empty Ability模板创建项目。 二、Stage模型卡片开发 Api&#xff1a;9 Model&#xff1a;stage Language&#xff1a;ArkTS AppScope &#xff1a;应用的全局配置信息。…