React Native 0.76版本发布：全新架构带来更快更响应的应用体验

React Native 0.76 现已发布，它默认启用的新架构带来了重大变化。此次更新引入了对现代 React 功能（如 Suspense 、 Transitions 、自动批量处理和 useLayoutEffect 钩子）的支持。新架构还对原生模块和组件进行了重构。以下是此版本中改进、新功能和重大变更的, 全面概述。

对对之前的版本感兴趣的人可以访问以下链接查看 React Native 0.74 的详情：发布 React Native 0.74。

React Native 0.76 的主要特点 🚀

• 并发渲染: 新架构使得 React Native 能够完全支持 React 的并发渲染功能，如 Suspense 和 Transitions。这通过允许 React Native 优先处理紧急更新而非非紧急的后台任务，使 UI 更加响应。
• 自动批处理: 通过自动批处理，React Native 现在能够合并状态更新，减少中间渲染次数，从而在高更新率场景中减少延迟并提高性能。
• useLayoutEffect 支持: 新架构提供了对 useLayoutEffect 的完全支持，允许在提交阶段同步读取布局数据。这使得如工具提示之类的 UI 元素可以在渲染到屏幕上之前准确定位。

新的架构是对 React Native 核心系统的全面重写，解决了旧架构中许多性能和可用性问题。以下是一些最显著的改进包括：

同步渲染和异步渲染

在旧架构中，React Native 使用了一个异步桥来在 JavaScript 和原生模块之间进行通信。虽然这种方法避免了阻塞主线程，但也导致了更新渲染时的延迟，尤其是那些需要即时反馈的交互。

在新架构中，支持异步和同步更新。这种混合方法确保了用户输入可以即时响应，无需等待后台任务，从而显著提高了应用程序的响应速度，使其感觉更接近本地体验。

拆掉这座桥

其中一个最具影响力的改变之一是移除了JavaScript与原生运行时之间的桥梁。这个桥梁以前会将函数调用序列化为连续的二进制流，成为了频繁更新或处理大对象的应用程序的瓶颈之一。现在，JavaScript和原生环境可以直接通过JavaScript接口（JSI）进行通信，从而减少延迟，提升性能。

新的本地模块系统

新的原生模块系统完全用C++构建，提供了多项关键改进：

• 与原生运行时的同步访问功能。
• 确保 JavaScript 和原生代码之间的类型安全。
• 默认按需加载模块，通过仅加载必要的内容来优化启动时间。这也使自定义原生模块的集成变得更加简单。现在可以直接同步调用原生函数，无需进行数据序列化。

下面是一个示例，展示了新的系统中同步调用工作方式。

// 获取原生模块的值
const value = nativeModule.getValue();  
nativeModule.doSomething(value)

此外，引入Codegen使得JavaScript层与原生层（native layer）之间能够建立强类型契约，减少了跨越层的类型错误，并可以自动生成样板代码。

并行渲染和新渲染引擎

新渲染器 彻底改变了 React Native 的架构。它现在可以在不同的线程中处理多个组件树，并全面支持 React 18 的并行功能，例如 Suspense 和 Transitions。这使得可以优先处理紧急的用户操作（如输入文字或点击），而后台更新则会异步处理。

渲染器还支持多线程同步布局读操作，确保 UI 快速响应且无卡顿。由于它是用 C++ 编写的，渲染器现在可以在 iOS、Android、Windows 和 macOS 等多个平台上共享，确保了一致性。

明确的事件循环

新的架构包括一个定义明确的事件循环机制，用于在 JavaScript 线程上处理任务的机制，使 React Native 的行为符合 web 标准。这带来了以下好处：

• 拥有中断渲染过程来处理紧急情况的能力。
• 更符合 web 规范，为诸如 microtasks、MutationObserver 和 IntersectionObserver 等功能提供支持。

事件循环机制使 React Native 能够更稳定地处理定时器和动画等任务，从而带来更流畅且响应更快的用户体验。

移除橋來加快速度

移除了桥梁之后，React Native 现在直接处理从 JavaScript 到 native 的通信。这不仅通过消除桥梁初始化的过程，减少了启动时间，还提高了崩溃报告、错误处理和调试的能力。

例如，这里是一个旧的基于桥的初始化与新架构相比的例子：

    // ❌ 使用桥接初始化较慢  
    从 'NativeTimingModule' 引入 `NativeTimingModule`;  
    将 `global.setTimeout` 设置为 `NativeTimingModule.setTimeout`;  

    // ✅ 直接在 C++ 中初始化  
    将 `setTimeout` 属性设置为 `createTimer`;  

当需要保持向后兼容性时，过渡桥梁暂时可用，但我们的最终目标是逐步淘汰它。

逐步转向新架构

过渡到新架构的设计是循序渐进的。大多数应用程序可以无需重大改动就升级到 React Native 0.76，这得益于一个互操作性层，它能确保旧架构与新架构之间的兼容性。

为了最大限度地发挥新架构的优势，开发人员需要将自定义的原生模块和组件迁移到新的API。以下是推荐的迁移路径：

• 将应用更新到 React 18： 这是开始使用 React Native 并发特性以及 Suspense 所必需的（并发特性指 concurrent features）。
• 迁移原生模块和组件到新的 Native Module APIs： 开发者需要更新自定义模块以支持新的原生模块API。否则，应用将无法享受新系统带来的性能提升、类型安全和 C++ 集成优势。

已兼容新架构的库可以在_ React Native 目录页面 _中找到。开发者需要检查他们的依赖项，确保这些依赖项与新架构兼容，并考虑使用替代库，或者如果某个库尚未迁移，可以提交问题。

React Native 0.76 是一个发布，新的架构标志着一个重大的飞跃。通过引入并发渲染、提升性能以及改善错误处理等功能，这次更新让 React Native 应用变得更快速、更灵敏、更易于维护。虽然转向新架构可能需要一些努力，但从长远来看，这些好处使得它成为任何 React Native 项目不可或缺的一步。

电报 (Telegram)/Instagram/脸书 (Facebook)/Threads/GitHub