理解 React Native 架构

执行环境

React Native 中的线程

React 和 React Native

React Native 组件和 React Navigation

核心组件和原生组件

React 中的思考

Hooks 和函数组件

组件的副作用和闭包

引用透明度和静态类型检查

组件测试

结论

对于具有 React 经验的 Web 开发人员来说，React Native 是应用程序开发的绝佳切入点。

然而，这并不意味着 React Native 很简单。你可以用熟悉的 JavaScript 语言编写应用程序，但这需要对 iOS 和 Android 平台有全面的了解。本文以 Web 开发者的角度，总结了我对 React Native 架构和生态系统的学习过程。

执行环境

React 在 JavaScript 运行时环境中运行。对于 Web 来说，它是一个 Web 浏览器。它有一个 JavaScript 线程，并使用浏览器中原生实现的 Web API。

理解回调在主 JS 线程和 Web API 之间的工作方式非常重要，尤其是在使用异步函数时。JavaScript 引擎和原生 API 之间的这种交互对于理解 React Native 在其环境中的行为方式也至关重要。

React Native 中的线程

React Native 执行环境中有三个关键线程，JavaScript 线程、Native 主线程以及处理 Shadow Node 的后台线程。

在当前架构中，这些线程之间的通信通过称为“桥”的库进行。

React Native 团队正在积极致力于重大架构升级，本文概述了为什么以及如何需要进行此项变更。

我不会深入细节，但对当前和未来架构的基本了解有助于对您的应用程序进行建模，特别是分离关注点。

React 和 React Native

正如您上面所看到的，React Native 涵盖的领域比 React 本身要广泛得多。

React Web 应用看起来相当直观，因为其核心概念“虚拟 DOM”暗示了浏览器的 HTML DOM 渲染。但实际上，虚拟 DOM 并非与 HTML DOM（文档对象模型）绑定。React中的虚拟 DOM 更像是一种编程概念或模式，而非一项具体的技术。

它为声明式 UI 提供了抽象。UI 的虚拟表示保存在内存中，并与外部 UI 库同步。此过程称为协调 (reconciliation )。

您可以在此处阅读有关 React Fiber 架构的详细解释。

和解与渲染

DOM 只是 React 可以渲染的渲染环境之一，其他主要目标是通过 React Native 渲染原生 iOS 和 Android 视图。（这就是为什么“虚拟 DOM”这个名称有点用词不当。）

它之所以能够支持如此多的目标，是因为 React 的设计将协调和渲染分离。协调器负责计算树的哪些部分发生了变化；然后，渲染器使用该信息来实际更新渲染后的应用程序。
这种分离意味着 React DOM 和 React Native 可以使用各自的渲染器，同时共享 React 核心提供的同一个协调器。Fiber
重新实现了协调器。它主要不关注渲染，尽管渲染器需要进行修改以支持（并利用）新的架构。

React Native 组件和 React Navigation

React Native 在 iOS 和 Android 平台上提供了自己的 UI 抽象层。React Native 核心和原生组件会调用原生视图，因此您可以使用 JavaScript 编写智能手机应用的 UI，而无需使用 Kotlin/Java 或 Swift/Objective-C。

核心组件和原生组件

原生组件涵盖了全面的原生 UI 元素，但你仍然需要编写大量代码来模拟原生用户体验，例如 Tab 键导航。这正是 React Navigation 的用武之地。

React Navigation 是一个纯 JavaScript 库，不包含任何原生代码。它基于其他原生库（例如 Reanimated、Gesture Handler 和 Screens）构建，以实现常见的应用导航模式。

它提供了如何构建和导航应用程序屏幕的最佳实践，这对于具有 Web 开发背景的人来说是最令人困惑的部分之一。
我的建议是，在你有信心之前，坚持使用基本的导航模式，一旦你有了很好的概述，就可以在 React Navigation 之上实现自定义导航器。我还建议将导航器和屏幕放置在专用目录中，以便将它们与其他组件清晰地区分开。

React 中的思考

尽管 UI 实现有所不同，但构建新应用程序的思维过程与“以 React 思考”的方式保持不变。

• 从模拟开始
• 将 UI 分解为组件层级
• 在 React 中构建静态版本
• 确定 UI 状态的最小（但完整）表示
• 确定您的州应该居住在哪里
• 添加反向数据流

Hooks 和函数组件

React 16.8.0 在 2019 年引入了 Hooks，这是一个巨大的范式转变。React 团队希望 Hooks 能够取代所有类组件的用例，并且一些流行的库已经朝着这个方向迁移，例如，React Navigation 5.0 和 React Redux 7.1.0 引入了各自的 Hook API。

从概念上讲，React 组件一直更接近函数，并且使用 Hooks 使得“以 React 思考”的方式变得更加直接。

Hooks 背后的动机解释了其好处：

Hooks 允许您根据相关部分（例如设置订阅或获取数据）将一个组件拆分为更小的函数，而不是根据生命周期方法强制拆分。您还可以选择使用 Reducer 管理组件的本地状态，使其更易于预测。

组件的副作用和闭包

基于原型继承，JavaScript 函数被称为一等公民，这意味着它们可以：

• 分配给变量
• 用作功能参数
• 从函数返回

这些同样适用于 React 的函数式组件。JavaScript 的闭包也是使用 Hooks 时必不可少的元素。

闭包是将函数与其周围状态（词法环境）的引用捆绑在一起（封装）而成的组合。换句话说，闭包允许你从内部函数访问外部函数的作用域。在 JavaScript 中，每次创建函数时都会创建闭包，即在函数创建时。（MDN Web 文档：闭包）

就像Hooks FAQ 中的这个例子一样，了解在组件生命周期中何时创建闭包，并在 Hooks 中使用稳定函数而不是不稳定状态变量非常重要。

注意：与类组件中的 setState 方法不同， useState 不会自动合并更新对象。你可以将函数更新器形式与对象展开语法结合使用来复制此行为：

React 还提供 Context API 来共享可被视为 React 组件树的“全局”数据，例如当前经过身份验证的用户、主题或首选语言。

引用透明度和静态类型检查

JavaScript 是多范式的，既支持面向对象编程，也支持函数式编程，而 React 继承了两者的优势。但对于 Hooks，我感觉它更偏向于函数式编程。

React 的关键特性在于组件的组合。不同开发者编写的组件应该能够良好地协同工作。对我们来说，重要的是，你可以向组件添加功能，而不会对整个代码库造成连锁影响。（React 设计原则）

通过从 React 组件中提取副作用，组件变得更加可预测。你可以预期，如果输入相同，组件也会渲染相同的输出。更具体地说，它可以获得引用透明性，或者说是幂等的。

在实践中，引用透明性应该通过静态类型检查和充分的单元测试来保证。
静态类型检查器和 linters（我推荐 TypeScript 和 ESLint）可以使开发体验更加自信和可靠，因为它们甚至可以在运行代码之前识别出某些类型的问题。

虽然在启动新项目时配置可能会有点繁琐，但它可以帮助你和你的团队提高工作效率。我觉得在 2020 年没有理由不使用它们。

组件测试

声明式组件更容易编写测试，因为您可以专注于组件的纯交互和渲染。

使用 Hooks，你可以从组件中提取状态逻辑，以便独立测试和复用。Hooks 允许你在不改变组件层次结构的情况下复用状态逻辑。（Hooks 背后的动机）

我相信React Native 测试库现在已经是 React Native 的事实上的测试库了。它与 Jest 紧密集成，并提供了清晰的测试方法，以及 React Navigation 和 Redux 等流行库。

React Test Renderer与 React 核心一同开发。它将 React 组件渲染为纯 JavaScript 对象，无需依赖 DOM 或原生移动环境。

React Native 测试库（RNTL）基于 React Test Renderer 构建。它添加了诸如 render（getByText、queryAllByA11yRole 等）、fireEvent、waitFor 和 act 等实用 API。它专注于用户体验和可访问性。

React Hooks 测试库用于编写测试自定义钩子，这些钩子不直接绑定到组件或难以通过组件交互进行测试的复杂组件。

结论

我知道 React Native 与 Native App 开发之间一直存在争论，并且这种争论还会一直存在。

但作为一名 JavaScript 开发者，React 和 React Native 本身就是一个非常有趣且值得学习的框架。它最大限度地发挥了 JavaScript 的能力，并包含了最佳实践。

通过学习的过程，我对 JavaScript 语言本身有了更深入的理解。希望这篇文章能给大家带来一些启发。