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

从 React 到 React Native 的旅程

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

作为一名 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]删除
最新教程 更多>
  • 如何解决AppEngine中“无法猜测文件类型,使用application/octet-stream...”错误?
    如何解决AppEngine中“无法猜测文件类型,使用application/octet-stream...”错误?
    appEngine静态文件mime type override ,静态文件处理程序有时可以覆盖正确的mime类型,在错误消息中导致错误消息:“无法猜测mimeType for for file for file for [File]。 application/application/octet...
    编程 发布于2025-04-28
  • 图片在Chrome中为何仍有边框?`border: none;`无效解决方案
    图片在Chrome中为何仍有边框?`border: none;`无效解决方案
    在chrome 中删除一个频繁的问题时,在与Chrome and IE9中的图像一起工作时,遇到了一个频繁的问题。和“边境:无;”在CSS中。要解决此问题,请考虑以下方法: Chrome bug Burcevention 样式的重复另一种解决方案是在CSS和通过JQuery的Border = 0属...
    编程 发布于2025-04-28
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-04-28
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-04-28
  • 如何在GO编译器中自定义编译优化?
    如何在GO编译器中自定义编译优化?
    在GO编译器中自定义编译优化 GO中的默认编译过程遵循特定的优化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    编程 发布于2025-04-28
  • 在程序退出之前,我需要在C ++中明确删除堆的堆分配吗?
    在程序退出之前,我需要在C ++中明确删除堆的堆分配吗?
    在C中的显式删除 在C中的动态内存分配时,开发人员通常会想知道是否有必要在heap-procal extrable exit exit上进行手动调用“ delete”操作员,但开发人员通常会想知道是否需要手动调用“ delete”操作员。本文深入研究了这个主题。 在C主函数中,使用了动态分配变量(H...
    编程 发布于2025-04-28
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-04-28
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-04-28
  • 为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    使用php dateTime修改月份:发现预期的行为在使用PHP的DateTime类时,添加或减去几个月可能并不总是会产生预期的结果。正如文档所警告的那样,“当心”这些操作的“不像看起来那样直观。 考虑文档中给出的示例:这是内部发生的事情: 现在在3月3日添加另一个月,因为2月在2001年只有2...
    编程 发布于2025-04-28
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-04-28
  • 为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...
    编程 发布于2025-04-28
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-04-28
  • 表单刷新后如何防止重复提交?
    表单刷新后如何防止重复提交?
    在Web开发中预防重复提交 在表格提交后刷新页面时,遇到重复提交的问题是常见的。要解决这个问题,请考虑以下方法: 想象一下具有这样的代码段,看起来像这样的代码段:)){ //数据库操作... 回声“操作完成”; 死(); } ?> ...
    编程 发布于2025-04-28
  • 您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本,例如红色的redors,for for for for错误消息?回答是的,可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息(版本31或更高版本)中。要实现这一目标,请使用以下模...
    编程 发布于2025-04-28
  • 在Python中如何创建动态变量?
    在Python中如何创建动态变量?
    在Python 中,动态创建变量的功能可以是一种强大的工具,尤其是在使用复杂的数据结构或算法时,Dynamic Variable Creation的动态变量创建。 Python提供了几种创造性的方法来实现这一目标。利用dictionaries 一种有效的方法是利用字典。字典允许您动态创建密钥并分...
    编程 发布于2025-04-28

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

Copyright© 2022 湘ICP备2022001581号-3