// <Parent /> 组件的样式
style={{
      flexDirection: 'row-reverse',
      backgroundColor: 'dodgerblue',
      flex: 1,
      marginLeft: 100,
      marginRight: 20,
      marginVertical: 20,
      alignItems: 'center'
}}

你注意到了吗，我们为 <Parent /> 添加了 100 像素的 marginLeft？是的，但看下 React Native V0.73（左边）的输出。它显示右边有 100 像素的边距（而不是左边）！！现在看下 React Native V0.74（右边）的输出。很好，在 V0.74 中，我们看到左边有了完美的 100 像素边距，并且两个 <Child /> 组件也被反转了 🚀

所以，在 Yoga-2 中，如果你在组件上应用了 ‘row-reverse’ 的 flex-direction 以及 “margin” 或 “padding” 或 “border”，那么该组件的边缘也会被翻转。但在 Yoga-3 中，这个问题已经完美解决了 💯

Yoga-3 还带来了一些 Yoga-2 中缺失的重要样式组件：

alignContent 样式的 space-evenly 属性
position 样式的 static 属性

新架构：默认无桥模式

旧架构

React Native 以前使用桥来在 JavaScript 和原生模块之间通信。这些模块用 C++、Objective C、Java 或 Kotlin 编写，以访问摄像头、传感器等原生功能。不幸的是，桥有一些限制。

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

新架构——性能提升

好消息是，React Native 团队能够用一个叫做 JSI（JavaScript 接口）的接口替换桥。它用 C++ 编写，使所有原生功能都可以通过你的 JS 代码访问，这意味着你可以调用原生方法而无需数据序列化或反序列化，使应用程序超级快速。

移除旧架构依赖

JSI 是新架构的核心部分。为了在我们的应用程序中充分启用 JSI（新架构），我们需要先移除应用程序对旧桥架构的依赖。为此，React Native 团队引入了新架构的三个支柱，使我们能够完全摆脱对桥的依赖。

TurboModules：移除了应用程序对桥中原生调用的依赖（在 V0.68 中发布）
Fabric Renderer：移除了应用程序对桥中组件渲染的依赖（在 V0.68 中发布）
Bridgeless Mode：移除了应用程序对桥中其他部分（如错误处理、全局事件发射器、计时器等）的依赖（在 V0.73 中发布）

V0.74 中的新特性

从 V0.74 开始，一旦你启用了新架构，你会看到“无桥模式”已自动启用。然而，新架构本身默认仍未启用。

当你在 V0.74 中启用新架构时，你会在 Metro 日志中看到如下两行：

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

新架构：批量 onLayout 更新

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

“onLayout” 属性

React Native 中的 onLayout 属性用于处理组件的布局（位置）变化。当组件的布局发生变化（由于挂载、调整大小、旋转或其他因素）时，onLayout 回调函数会被触发。

你可以像下面这样使用这个属性，根据更新的布局信息执行操作。

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

“onLayout” 批量更新如何工作？

假设组件 <App/> 如下所示，每个 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) // View 挂载时更新 state1
    }}></View>

   <View
    onLayout={() => {
     console.log('SECOND View invoked')
     setState2(true) // View 挂载时更新 state2
    }}></View>

   <View
    onLayout={() => {
     console.log('THIRD View invoked')
     setState3(true) // View 挂载时更新 state3
    }}></View>
  </View>
 )
}

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