作为一名 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 中文本可以直接放置在许多元素中不同。这可确保不同平台上文本的正确样式和行为，从而提高一致性和可访问性。
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 中，您不需要宽度、高度或字体大小等属性的单位，它会自动假定尺寸以与密度无关的像素为单位。
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 为令人兴奋的多平台应用程序开发世界打开了大门！

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