从 React 到 React Native 的旅程

作为一名 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 团结起来，带来更快的改进、良好集成的第三方库和丰富的共享资源。

• 熟悉的开发者体验

React 与 React Native：异同

架构与编译

相似之处：

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

差异：

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

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

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 不同，在 React 中文本可以直接放置在许多元素中。这可确保不同平台上文本的正确样式和行为，从而提高一致性和可访问性。
4. 事件处理：React 使用 onClick 进行点击事件，而 React Native 使用 onPress 进行触摸交互，体现了交互性质的不同。

造型

相似之处

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

差异

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

库和工具

相似之处

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

差异

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

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

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

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

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

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

因此，随着 DOM 和 Device 之间的界限不断模糊，拥抱 React Native 为跨平台应用程序开发的激动人心的世界打开了大门！

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

以上是从 React 到 React Native 的旅程的详细内容。更多信息请关注PHP中文网其他相关文章！