”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 从 React 到 React Native 的旅程

从 React 到 React Native 的旅程

发布于2024-11-08
浏览:800

作为一名 React / JS 开发人员,您可能有这样的想法 “我应该学习 React Native 吗?” 这是一个公平的问题,也是我几年前问自己的问题。事实证明,学习 React Native 绝对是正确的决定。这让我成为了亚马逊的高级开发倡导者,我现在使用 React Native 跨 Android、Fire TV 和平板电脑设备构建应用程序。

如果您正在争论是否要超越网络应用程序,这里有一些关于为什么值得考虑的想法:

为什么要学习 React Native?

  • “一次学习,随处编写”的理念不仅仅局限于 iOS 和 Android,它现在还包括 tvOS、VisionOS 等平台,甚至像 React-native-macos 等桌面环境

  • 行业相关性:亚马逊、Meta、微软等大公司都在采用 React Native。 为什么?代码可重用性、成本效益高,并且允许您构建跨平台。

  • 强大的社区支持:React Native 在 GitHub 上拥有超过 100k star 和 24k fork,定期更新和积极开发。

  • 开发者满意度高:根据 React Native 现状调查,90% 的开发者会再次使用 React Native!

  • 统一生态系统:React Native社区围绕Expo集结,带来更快的改进、良好集成的第三方库和丰富的共享资源。

Journeying from React to React Native

  • 熟悉的开发者经验

React 与 React Native:异同

架构与编译

相似之处:

两者都使用通常称为“虚拟 DOM”的协调过程。此过程将一棵树与另一棵树进行比较,以确定 UI 的哪些部分需要更新。因此,它们都支持快速刷新,使您能够实时看到 UI 变化。

差异:

React 编译以利用 DOM 和 Web API 在 Web 浏览器中呈现。即使通过移动浏览器访问,它仍然受到浏览器功能的限制,并且对本机设备功能的访问受到限制。

另一方面,

React Native 编译为本机代码,允许直接访问特定于平台的 API 和功能。这意味着 React Native 应用程序可以利用相机访问、推送通知等设备功能,提供本机用户体验。因此,它采用了不同的架构方法,即所谓的“无桥”架构,并且它使用本机组件而不是 DOM。它使用 Turbo Native 模块并利用 JavaScript 接口 (JSI),允许 JavaScript 和本机代码之间直接通信。这种架构是新的,您可能会听到“新架构”这个术语。如果您有兴趣了解更多信息,我在上一篇文章中对此进行了介绍。

Journeying from React to React Native

JSX 和 Hooks

相似之处

两者都使用 JSX 来描述 UI 并支持 React hooks(useState、useEffect 等)。这使您可以在两个库中保持一致的编码风格和状态管理方法。

成分

相似之处

React 和 React Native 都遵循基于组件的架构,并且组件在底层遵循相同的生命周期方法。

差异:

  1. 组件导入:在React Native中,您可以从react-native导入UI组件,这与React不同,其中HTML元素是全局可用的。这种差异实际上是我最喜欢 React Native 的事情之一,因为你可以访问一组开箱即用的预构建组件,例如视图、文本、图像、TextInput、ScrollView。
  2. 特定于平台的组件:React Native 还提供为 iOS 和 Android 量身定制的开箱即用的组件和 API。
  3. 文本处理:在 React Native 中,所有文本都必须包装在 组件中,这与在 React 中文本可以直接放置在许多元素中不同。这可确保不同平台上文本的正确样式和行为,从而提高一致性和可访问性。
  4. 事件处理:React使用onClick进行点击事件,而React Native使用onPress进行触摸交互,体现了交互性质的不同。

Journeying from React to React Native

造型

相似之处

React 和 React Native 都提供了灵活的组件样式设计方法。它们都支持内联样式,允许您将样式直接应用于组件。此外,两者都可以创建可重用的样式对象。

差异

  1. 样式语言:React 通常使用 CSS 或 CSS-in-JS 库进行样式设置,而 React Native 使用基于 JavaScript 对象的样式系统,但有一些区别:
    • 属性名称:React Native 使用驼峰命名法作为属性名称(例如,fontSize 而不是 font-size)。
    • 值单位:在 React Native 中,您不需要宽度、高度或字体大小等属性的单位,它会自动假定尺寸以与密度无关的像素为单位。
  2. StyleSheet API:React Native 提供了 StyleSheet.create() 方法来创建样式对象。该 API 通过减少在每次渲染上重新创建样式对象的需要来提高性能。
  3. 样式应用:与 React 中的类名可用于应用样式不同,React Native 使用 style 属性将样式直接应用于组件。
  4. 有限的 CSS 子集:React Native 仅支持 CSS 属性的子集,重点关注那些对不同布局有意义的属性。这意味着某些特定于 Web 的属性(如 float)不可用,而其他属性(如 flex)可能表现不同。

Journeying from React to React Native

库和工具

相似之处

React 和 React Native 共享许多核心库。您可以使用相同的状态管理库(如 Redux、MobX)以及数据获取库(如 Axios 或 Fetch API)。

差异

导航: 虽然在 React 中您通常可能使用 React Router 进行 Web 导航,但 React Native 有自己的 React 导航库。这是因为 React (Web) 通常使用基于 URL 的导航,其中根据当前 URL 路径呈现不同的组件。而 React Native 使用基于堆栈的导航,模仿本机移动应用程序体验。屏幕彼此“堆叠”在一起,通过过渡将新屏幕推入堆栈或“弹出”它们。

?注意:在构建应用程序时,请记住将文件夹命名为“Screens”而不是“Pages”。

Journeying from React to React Native

测试:两个库的概念仍然相似,侧重于组件渲染和事件模拟,但具体的测试库有所不同。 React 使用 React 测试库,而 React Native 您将使用 React Native 测试库 (RNTL),但不要推迟,因为 RNTL 只是在 React 测试渲染器之上提供轻量级实用功能。

?由于 DOM 依赖关系,某些 React 库可能无法与所有 React Native 平台兼容,但是您可以在以下位置检查所有库的平台兼容性:(https://reactnative.directory)

Journeying from React to React Native

通过通用 React 应用程序缩小差距

如果您仍持观望态度,那么通用 React 应用程序的兴起确实是一个令人兴奋的领域,它进一步缩小了 React 和 React Native 之间的差距。通用 React 库和工具通常由 react-native-web 提供支持,使您能够从共享的 React Native 代码库创建在 iOS、Android 和 Web 上运行的跨平台应用程序。这使您可以共享导航、样式、状态管理和业务逻辑,从而节省您的时间和精力,同时尊重每种设备类型的独特约定。

因此,随着 DOM 和 Device 之间的界限不断模糊,拥抱 React Native 为令人兴奋的多平台应用程序开发世界打开了大门!

如果您准备好开始,请查看我最喜欢的资源的评论,或在下面评论您的资源⬇️

版本声明 本文转载于:https://dev.to/amazonappdev/journeying-from-react-to-react-native-21ep?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何使用组在MySQL中旋转数据?
    如何使用组在MySQL中旋转数据?
    在关系数据库中使用mysql组使用mysql组来调整查询结果。在这里,我们面对一个共同的挑战:使用组的组将数据从基于行的基于列的基于列的转换。通过子句以及条件汇总函数,例如总和或情况。让我们考虑以下查询: select d.data_timestamp, sum(data_id = 1 tata...
    编程 发布于2025-02-19
  • 在没有密码提示的情况下,如何在Ubuntu上安装MySQL?
    在没有密码提示的情况下,如何在Ubuntu上安装MySQL?
    在ubuntu 使用debconf-set-selections 在安装过程中避免密码提示mysql root用户。这需要以下步骤: sudo debconf-set-selections
    编程 发布于2025-02-19
  • Java是否允许多种返回类型:仔细研究通用方法?
    Java是否允许多种返回类型:仔细研究通用方法?
    在java中的多个返回类型:一个误解介绍,其中foo是自定义类。该方法声明似乎拥有两种返回类型:列表和E。但是,情况确实如此吗?通用方法:拆开神秘 [方法仅具有单一的返回类型。相反,它采用机制,如钻石符号“ ”。分解方法签名: :本节定义了一个通用类型参数,E。它表示该方法接受扩展FOO类的任何...
    编程 发布于2025-02-19
  • \“(1)vs.(;;):编译器优化是否消除了性能差异?\”
    \“(1)vs.(;;):编译器优化是否消除了性能差异?\”
    答案:在大多数现代编译器中,while(1)和(1)和(;;)之间没有性能差异。 说明: perl: S-> 7 8 unstack v-> 4 -e语法ok 在GCC中,两者都循环到相同的汇编代码中,如下所示:。 globl t_时 t_时: .l2: movl $ .lc0,�i ...
    编程 发布于2025-02-19
  • 为什么箭头函数在IE11中引起语法错误?如何修复它们?
    为什么箭头函数在IE11中引起语法错误?如何修复它们?
    为什么arrow functions在IE 11 中引起语法错误。 IE 11不支持箭头函数,导致语法错误。这使用传统函数语法来定义与原始箭头函数相同的逻辑。 IE 11现在将正确识别并执行代码。
    编程 发布于2025-02-19
  • 'exec()
    'exec()
    Exec对本地变量的影响: exec function,python staple,用于动态代码执行的python staple,提出一个有趣的Query:它可以在函数中更新局部变量吗?在Python 3中,以下代码代码无法更新本地变量,如人们所期望的:代替预期的'3',它令人震...
    编程 发布于2025-02-19
  • 如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    从python 导入编解码器 导入 text = codecs.decode('这狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#带有表情符号 emoji_pattern = re.compile(“ [”...
    编程 发布于2025-02-19
  • 如何检查对象是否具有Python中的特定属性?
    如何检查对象是否具有Python中的特定属性?
    方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例,其中尝试访问不确定属性会引起错误: >>> a = someClass() >>> A.property Trackback(最近的最新电话): 文件“ ”,第1行, AttributeError:SomeClass实...
    编程 发布于2025-02-19
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    如何为JavaScript对象变量创建动态键,尝试为JavaScript对象创建动态键,使用此Syntax jsObj['key' i] = 'example' 1;将不起作用。正确的方法采用方括号:他们维持一个长度属性,该属性反映了数字属性(索引)和一个数字属性的数量。标准对象没有模仿这...
    编程 发布于2025-02-19
  • 版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    在默认值中使用current_timestamp或mysql版本中的current_timestamp或在5.6.5 这种限制源于遗产实现的关注,这些限制需要为Current_timestamp功能提供特定的实现。消息和相关问题 current_timestamp值: 创建表`foo`( `...
    编程 发布于2025-02-19
  • 如何使用PHP从XML文件中有效地检索属性值?
    如何使用PHP从XML文件中有效地检索属性值?
    从php 您的目标可能是检索“ varnum”属性值,其中提取数据的传统方法可能会使您留下PHP陷入困境。使用simplexmlelement :: attributes()函数提供了简单的解决方案。此函数可访问对XML元素作为关联数组的属性: - > attributes()为$ attr...
    编程 发布于2025-02-19
  • 哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    在Python 射线tracing方法 matplotlib路径对象表示多边形。它检查给定点是否位于定义路径内。 This function is often faster than the ray tracing approach, as seen in the code snippet pr...
    编程 发布于2025-02-19
  • 如何可靠地检查MySQL表中的列存在?
    如何可靠地检查MySQL表中的列存在?
    在mySQL中确定列中的列存在,验证表中的列存在与与之相比有点困惑其他数据库系统。常用的方法:如果存在(从信息_schema.columns select * * where table_name ='prefix_topic'和column_name =&...
    编程 发布于2025-02-19
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    [2最后一行与数据集中的每个不同标识符关联。考虑以下数据: 1 2014-02-01 kjkj 1 2014-03-11 ajskj 3 2014-02-01 sfdg 3 2014-06-12 fdsa 为了检索数据集中每个唯一ID的最后一行信息,您可以在操作员上使用Postgres的有效效...
    编程 发布于2025-02-19
  • 如何使用char_length()在mySQL中按字符串长度对数据进行排序?
    如何使用char_length()在mySQL中按字符串长度对数据进行排序?
    [2使用内置的char_length()函数。:返回字符串中的字符数,考虑多BYTE字符encoding(例如UTF-8)。 ] :返回字符串占用的字节数,该字符的数量可能无法准确反映字符计数多字节编码。 [&& && && && && && &&华从指定的表格中的所有行,并根据指定列的字符长度按升...
    编程 发布于2025-02-19

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3