React Native 0.76新版及全新架构：为什么说这是最令人兴奋的版本？

这个标题既通俗易懂，又符合中文的口语表达习惯，准确传达了文章的核心内容。

React Native 0.76

一个介绍

自从2015年Facebook（现在叫Meta）对外发布React Native以来，React Native的发展与其他技术有所不同。最初，这只是一个简单的实验，将React的声明式UI范式应用于移动应用。现在已经发展成一个成熟且强大的框架，服务于全球成千上万的iOS和Android应用。微软、Shopify和Coinbase等公司都用React Native构建了令人印象深刻的应用程序，展示了React Native在构建应用程序方面的强大能力。这些应用程序能够以几乎不可察觉的变化，提高开发效率，实现类似原生应用的用户体验。

正如预期的那样，React Native 遇到了一些挑战，比如性能瓶颈、原生模块集成的复杂性以及臭名昭著的“桥”架构问题。这些问题促使了转向一种新的架构，这反过来促成了 React Native 历史上最大的一次改造。

随着 React Native 0.76 版本的到来，框架变得非常出色，全新的架构大大提升了性能、可扩展性和开发体验。

这篇文章详细讨论了这次发布为什么将成为游戏规则的改变者，从技术更新到这对所有使用或开发 React Native 的开发者意味着什么。

术语与概念，比如，我们今天要讨论的一些术语与概念

在我们开始展示新改进和这个版本带来的内容之前，让我们先从技术术语开始，这样可以让技术人员更容易理解这些概念。

1. 地铁打包程序 Metro Bundler

Metro 是 React Native 使用的 JavaScript 打包工具。你可以把它想象成将你的应用的 JavaScript 代码打包并提供给移动应用的管道。具体来说，它会执行以下操作：

• 将现代 JavaScript 转换成可以在所有设备上运行的代码
• 管理依赖项并打包成单一文件
• 在开发时实现快速刷新
• 支持模块解析和资源管理功能

随着这次发布，Metro 已经优化以实现更快的解析速度和更高效的资产处理效率，使开发过程更加顺畅，缩短了构建时间。

2. 原生模块

原生模块使 React Native 能够与平台的原生代码（如 Android 的 Java/Kotlin 或 iOS 的 Objective-C/Swift）进行通信。新架构引入了 类型安全的原生模块，这使得 JavaScript 和原生代码之间的交互更加安全和高效。去掉中间层减少了开销，提高了性能和可靠性。

3. 旧架构与新架构的对比

在了解最新的变化之前，让我们先了解一下React Native传统上是如何工作的呢。在旧架构中，JavaScript和原生代码通过一个“桥”进行通信，本质上是一个JSON消息传递队列。虽然这样可以工作，但它有一些局限性。

• 所有数据都必须进行序列化/反序列化
• 通信完全采用异步的方式
• 桥有可能变成瓶颈

几个关键创新让新架构从根本上改变了这种状况。

第四部分：了解 JSI 和新桥

JavaScript 接口 (JSI) 位于新架构的核心位置。与旧版桥相比。

• 它允许JavaScript与原生代码之间直接通信
• 支持同步的通信
• 提供JavaScript与原生层之间直接的内存访问
• 消除了JSON序列化的必要

5. React Native 是怎么工作的

React Native 依赖于一个协调过程，JavaScript 中的 UI 更新通过桥被转换成原生视图。此前，由于异步通信，这个桥引入了延迟。新架构消除了桥的存在，采用了 Turbo 模块系统，直接处理调用，从而带来了更快和更流畅的用户体验。

6. 布料：新的渲染系统

Fabric 是 React Native 中的一个重要的架构更改，旨在提升性能、灵活性，并改善开发体验。它被设计用来取代旧的基于桥的渲染系统，提供了多项关键优势，

• 允许从 JavaScript 直接操作原生视图的能力
• 支持同时渲染
• 增强了与原生 UI 组件的交互能力
• 降低内存使用

7. 代码生成器和 Turbo 模块技术

• Codegen 自动为模块和组件生成原生代码，减少人为错误，同时保证类型安全。
• 极速模块 提高代码的模块化程度，提高原生资源的利用效率，也让集成自定义功能变得更加容易。

例子

    import type {TurboModule} from 'react-native/types';  
    import {TurboModuleRegistry} from 'react-native';  

    export interface Spec extends TurboModule {  
      multiply(a: number, b: number): Promise<number>;  
    }  

    export default TurboModuleRegistry.get<Spec>('Calculator');

8. 原子批量处理技术

原子批处理可以将多个UI更新合并为一个操作，从而减少渲染开销。简单来说，React Native不是逐个处理变化，而是将所有变化一起处理，使UI更加流畅和响应迅速。

9. React 中的 Suspense 特性

注：这里的 "Suspense in React" 更贴切的翻译是 "React 中的 Suspense 特性" 或 "React 中的悬垂 API"。

React Suspense 让开发人员可以用更简洁、更直接的方式来处理像数据获取这类异步任务。新架构将 Suspense 集成到 React Native 中，带来了流畅的数据加载体验并简化了代码结构。

那么，React Native 0.76 有什么新东西？

这就是版本 0.76 的独特之处：

1. 新架构已成为默认设置

经过多年的开发，新架构现在默认启用。这实现了JavaScript和原生代码之间更快的通信，利用了Turbo Modules和Codegen等特性来提高性能。

2. React Native开发工具包

一个新的React Native DevTools工具界面提供了更好的调试功能，让开发者可以更有效地检查和优化他们的应用。

浏览器开发工具对于检查、调试和优化应用程序非常有用。一些浏览器开发工具中最常用的几个功能有：

1. 元素检查器
2. 控制台
3. 网络请求
4. 性能分析工具（应用性能分析）

3: 性能更佳

3.1. 地铁解决时间快15倍左右

3.2. 由于合并原生库，Android应用大小减少约3.8 MB：

React Native 团队已经将一些 C++ 动态链接库（这些库仅在运行时加载，也称为 .so 文件）合并成一个库（libreactnative.so）以供 Android 使用。Meta 的 Nicola（@cortinico）来自 Meta 向我们展示了，一个使用 React Native 0.74 的 Android 应用带有 43 个动态链接库，但在 React Native 0.76 版本中，动态库的数量已减少到 10 个动态链接库。最终，Android 应用现在减少了大约 3.8MB，启动时间也减少了大约 15 毫秒。

3.3. 更高效的内存管理和线程管理。

4. React 的最新功能

悬停 、 过渡 和 自动批量处理 的集成使 React Native 更接近现代 React 网页实践，使跨平台的开发体验更加连贯和顺畅。

5. 向下兼容

一个自动互操作层确保使用旧架构库的应用程序仍然可以正常运行。这表示你可以不必立即重写整个应用——迁移可以逐步进行。

6. 更完善的库支持

大多数流行的 React Native 生态系统库已经更新以支持新架构（例如，分包），这样可以将开发人员的不便最小化。

7. 重大更改

• 支持的最低 iOS 和 Android SDK 版本已更新。
• 移除了 react-native-community/cli，现在使用内置的替代方案。
• 清理了废弃的 API，从而为更流畅的开发扫清了障碍。

8. 15倍更快的 Metro 构建过程

開發者為什麼會興奮

新架构不只是一个性能提升，这是一次范式转变，让 React Native 应用变得更为灵活、更及时响应且更未来导向。开发者现在可以利用以下优势：

• 无缝的原生集成：更快地与原生代码交互，无需桥接带来的额外负担。
• 现代的UI范式：Suspense和Transitions（这两种技术）让用户体验更加流畅。
• 更简单的调试：借助DevTools和自动批处理，调试变得更简单。
• 新版本的性能提升了大约5.5倍，这已由Kraken证实，详情请参阅此文章：https://blog.kraken.com/product/engineering/how-kraken-fixed-performance-issues-via-incremental-adoption-of-the-react-native-new-architecture
• 新的Expensify应用使用了新架构，详情请参阅：https://blog.swmansion.com/sunrising-new-architecture-in-the-new-expensify-app-729d237a02f5

来源：Kraken博客，如何通过渐进式采用React Native新架构解决性能问题 https://blog.kraken.com/product/engineering/how-kraken-fixed-performance-issues-via-incremental-adoption-of-the-react-native-new-architecture

结论.

React Native 0.76 标志着这个框架在多年努力后迎来了一个新的里程碑，它不仅统一了跨平台应用的代码库，更重要的是实现了架构的现代化。对于开发者来说，这次发布承诺可以更快地构建更强大的应用，同时减少了开发中的麻烦。

不仅新架构是一项技术飞跃，它也是未来导向，并为React Native应对未来的挑战做好了准备。现在是成为React Native开发者最好的时机，更深入地了解它。

如果你需要将 React native 版本升级到最新稳定版本的 React native，请查看这项服务 https://casainnov.com/mobiledevelopment。

此外，该公司还提供不同的技术服务，包括边缘计算技术开发（AI、Web3等）、咨询及定制开发服务。详情请见：https://casainnov.com/

我分享一些关于 React Native、React 和 Typescript 的内容。你可以在 LinkedIn 或 Medium 上关注我。

ReactNative #WebSockets #实时 #移动应用开发 #应用开发 #技术创新 #编程 #JavaScript #移动应用 #开发者社区 #Socket程序 #实时 #TechNavy #生成AI #MistralAI

栈学术界 (Stackademic) 🎓

感谢你读到最后，下面要说几句。在你离开之前，我还有几句话要说，

• 请考虑给我们作者点赞并关注我们哦! 👏
• 关注我们 X | 领英 | YouTube | Discord | Newsletter | Podcast 吧
• 在Differ上免费创建属于你的AI驱动博客吧。
• 更多内容请到 Stackademic.com 浏览哦