React Native V0.74 — 稳定版已发布 🚀

嗨**，React Native** 开发人员，

在React Native的世界里，一个令人兴奋的消息是，V0.74在几天前发布了超过1600次提交。亮点包括：

• 瑜伽3.0
• 新架构：默认无桥
• 新体系结构：批量 更新**onLayout**
• Yarn 3 用于新项目

让我们深入了解每一个新的亮点。

瑜伽3.0

让我们首先了解一下 React Native 中的瑜伽是什么。

Yoga — 布局引擎

Yoga 是 Meta 开发的开源布局引擎。引擎，指的是 UI 元素（如按钮、文本、图像等）在用户界面中的排列和位置。

Yoga 为每个 UI 元素计算这四个。

1. 定位
2. 上浆
3. 对准
4. 间距

使用 Yoga，您可以创建适应不同屏幕尺寸和方向的响应式布局。它还在 React Native 中实现了一个广泛使用的概念，称为 CSS Flexbox。所以你已经感觉到瑜伽是React Native灵活UI的核心（︎ ♥）。

瑜伽 3.0 — 有什么新功能？

在React Native的所有早期版本中，都存在一些不正确的布局行为。Yoga 3解决了所有这些问题。最常见的问题之一是**“行反转”**样式无法正常运行。

让我们看一下下面的图片，左边是 V0.73，右边是 V0.74。

在上图中，我们有一个 ，然后在其中有一个 组件，然后在两个 组件内。

然后，我们在 组件中应用了此样式。

// Style for <Parent/> componentstyle={{      flexDirection: 'row-reverse',      backgroundColor: 'dodgerblue',      flex: 1,      marginLeft: 100,      marginRight: 20,      marginVertical: 20,      alignItems: 'center'}}

您是否注意到，我们为 添加了 100 像素的 marginLeft？是的，但请参阅上图中 React Native V0.73（左侧）的输出。它在右侧（而不是左侧）显示 100 像素的边距！好的，现在让我们看看 React Native V0.74 的输出（正确的一个）。太好了，在 V0.74 中，我们在左侧看到了完美的 100 像素边距，并且还颠倒🚀了两个**<子/>**分量

因此，在 Yoga-2 中，如果您在组件中应用带有**“边距”或“填充”或“边框”的“行反转”**弯曲方向，那么该组件的边缘也会被翻转。但在 Yoga-3 中，它已经得到了完美的💯解决

Yoga-3 带来了 Yoga-2 中缺少的其他一些重要造型组件。

• 'space-evenly'样式属性alignContent
• 'static'样式属性position

新架构：默认无桥

老建筑

React Native 以前使用桥接器在 JavaScript 和原生模块之间进行通信。这些模块是用 C++、Objective C、Java 或 kotlin 编写的，用于访问相机、传感器等原生功能。不幸的是，这座桥有一些限制。

一个主要限制是，每次一个层与另一个层通信时，它都涉及序列化（将 JS 对象转换为 JSON 字符串）和反序列化（将 JSON 字符串转换回 JS 对象）数据。由于转换需要时间，因此此过程会给通信流增加性能问题。

新架构 — 性能助推器

好消息是，React Native 团队能够用一个名为 **JSI（JavaScript 接口）**的接口替换桥接器。它是用 C++ 编写的，它开放了您的 JS 代码可用的所有原生功能，这意味着您可以在没有任何数据序列化或反序列化的情况下调用原生方法，从而使应用程序超快。

删除 OLD 体系结构依赖项

JSI 是新架构的核心部分。为了在我们的应用程序中启用 JSI（新架构）的全部功能，我们需要首先从 OLD 桥架构中删除应用程序依赖项。为了做到这一点，React Native 团队引入了新架构的三个支柱，这使我们能够完全消除对桥接的依赖。

1. 涡轮增压模块：它从桥接器中删除了应用程序对本地调用的依赖性（在 V0.68 上发布）
2. 织物渲染器：它从桥接器中删除了应用程序对组件渲染的依赖性（在 V0.68 上发布）
3. 无桥模式：它从桥接器（V0.73 发布）中删除了应用程序对其他所有内容的依赖（即：React Native 运行时的其余部分：错误处理、全局事件发射器、计时器等）

V0.74 有什么新功能？

从 V0.74 开始，一旦启用新架构，您将看到**“无桥模式”已自动**启用。但是，默认情况下，新架构本身仍未启用。

当你在使用 V0.74 的 React Native 应用中启用 New Architecture 时，你会在 Metro 日志中看到以下两行：

就是这样🚀.从 React Native V0.74 开始，启用新架构💯后无需手动启用无桥模式

新体系结构：批量 更新**onLayout**

另一个好消息是，React Native 团队不仅将新架构无桥模式设为默认模式，而且还改进了此架构以处理批量更新（在单个渲染中执行多个更新）。此优化通过最大限度地减少渲染期间与布局相关的计算来增强性能。**onLayout**

“ 道具onLayout”

React Native 中的 prop 用于处理组件的**布局（位置）**更改。当组件的布局发生变化时（由于安装、调整大小、旋转或其他因素），将触发回调函数。onLayout``onLayout

您可以像下面一样使用此属性来根据更新的布局信息执行操作。

function App(){  return (      <View         onLayout={() => {          console.log('Component has been invoked 🚀')         }}      />   )}

“批量更新”的工作原理是什么？onLayout"

假设组件 如下图所示，其中每个 View 在挂载时都会触发一个回调函数。**onLayout**

function App() { const [state1, setState1] = useState(false) const [state2, setState2] = useState(false) const [state3, setState3] = useState(false) console.log('✅ COMPONENT RE-RENDERED .....') return (  <View>   <View    onLayout={() => {     console.log('FIRST View invoked')     setState1(true) // Update state1 when the View mounts    }}></View>   <View    onLayout={() => {     console.log('SECOND View invoked')     setState2(true) // Update state2 when the View mounts    }}></View>   <View    onLayout={() => {     console.log('THIRD View invoked')     setState3(true) // Update state3 when the View mounts    }}></View>  </View> )}

现在，在 React Native V0.73 中，你会看到如下👇输出

您是否注意到，在每次执行回调时，它都会重新渲染整个组件？是的，这不是意料之中的。**“onLayout”**

现在，让我们看看 React Native V0.74 中启用新架构👇的输出

惊人的性能🔥。对于所有 3 个回调执行，该组件仅重新渲染一次。**“onLayout”**

下图中关于批量更新👇的一个很好的总结**“onLayout”**

Yarn 3 用于新项目

Yarn 3 现在是使用 React Native Community CLI 初始化的新项目的默认 JavaScript 包管理器。这将替换 Yarn Classic **（1.x），**后者已被弃用并以前用作默认值。

Yarn 3 加快了安装和更新依赖项的过程，并优化了依赖项的存储方式。

就是这样 🙌

React Native 版本 0.74 在组件布局和架构、批量 onLayout 更新以及与 Yarn 3 的集成方面进行了重大改进。