React Native 最近有個(gè)令人興奮的消息——V0.74 版本在幾天前發(fā)布了，包含了超過1600個(gè)提交。亮點(diǎn)如下：

• Yoga 3.0
• 新架構(gòu)：默認(rèn)無橋模式
• 新架構(gòu)：批量 onLayout 更新
• 新項(xiàng)目使用 Yarn 3

下面我們深入了解每個(gè)新亮點(diǎn)。

Yoga 3.0

首先了解一下 React Native 中的 Yoga 是什么。

Yoga —— 布局引擎

Yoga 是一個(gè)由 Meta 開發(fā)的開源布局引擎。它負(fù)責(zé)在用戶界面內(nèi)排列和定位 UI 元素（如按鈕、文本、圖像等）。

Yoga 為每個(gè) UI 元素計(jì)算以下四個(gè)方面：

• 定位
• 尺寸
• 對(duì)齊
• 間距

通過 Yoga，你可以創(chuàng)建響應(yīng)式布局，適應(yīng)不同的屏幕尺寸和方向。它還在 React Native 中實(shí)現(xiàn)了一個(gè)廣泛使用的概念——CSS Flexbox。因此，Yoga 可以說是 React Native 靈活 UI 的核心。

Yoga 3.0 —— 新特性

在之前的所有 React Native 版本中，存在一些不正確的布局行為。Yoga 3 解決了這些問題。其中一個(gè)最常見的問題是 ‘row-reverse’ 樣式無法正常工作。

來看下圖，左邊是 V0.73，右邊是 V0.74。

在上圖中，我們有一個(gè) <Container />，內(nèi)部是一個(gè) <Parent /> 組件，再內(nèi)部是兩個(gè) <Child /> 組件。

我們?cè)?nbsp;<Parent /> 組件中應(yīng)用了如下樣式：

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

你注意到了嗎，我們?yōu)?nbsp;<Parent /> 添加了 100 像素的 marginLeft？是的，但看下 React Native V0.73（左邊）的輸出。它顯示右邊有 100 像素的邊距（而不是左邊）??！現(xiàn)在看下 React Native V0.74（右邊）的輸出。很好，在 V0.74 中，我們看到左邊有了完美的 100 像素邊距，并且兩個(gè) <Child /> 組件也被反轉(zhuǎn)了 ??。

所以，在 Yoga-2 中，如果你在組件上應(yīng)用了 ‘row-reverse’ 的 flex-direction 以及 “margin” 或 “padding” 或 “border”，那么該組件的邊緣也會(huì)被翻轉(zhuǎn)。但在 Yoga-3 中，這個(gè)問題已經(jīng)完美解決了 ??。

Yoga-3 還帶來了一些 Yoga-2 中缺失的重要樣式組件：

• alignContent 樣式的 space-evenly 屬性。
• position 樣式的 static 屬性。

新架構(gòu)：默認(rèn)無橋模式

舊架構(gòu)

React Native 以前使用橋來在 JavaScript 和原生模塊之間通信。這些模塊用 C++、Objective C、Java 或 Kotlin 編寫，以訪問攝像頭、傳感器等原生功能。不幸的是，橋有一些限制。

一個(gè)主要限制是，每次一個(gè)層與另一個(gè)層通信時(shí)，都涉及序列化（將 JS 對(duì)象轉(zhuǎn)換為 JSON 字符串）和反序列化（將 JSON 字符串轉(zhuǎn)換回 JS 對(duì)象）數(shù)據(jù)。由于轉(zhuǎn)換需要時(shí)間，這個(gè)過程會(huì)給通信流程帶來性能問題。

新架構(gòu)——性能提升

好消息是，React Native 團(tuán)隊(duì)能夠用一個(gè)叫做 JSI（JavaScript 接口）的接口替換橋。它用 C++ 編寫，使所有原生功能都可以通過你的 JS 代碼訪問，這意味著你可以調(diào)用原生方法而無需數(shù)據(jù)序列化或反序列化，使應(yīng)用程序超級(jí)快速。

移除舊架構(gòu)依賴

JSI 是新架構(gòu)的核心部分。為了在我們的應(yīng)用程序中充分啟用 JSI（新架構(gòu)），我們需要先移除應(yīng)用程序?qū)εf橋架構(gòu)的依賴。為此，React Native 團(tuán)隊(duì)引入了新架構(gòu)的三個(gè)支柱，使我們能夠完全擺脫對(duì)橋的依賴。

• TurboModules：移除了應(yīng)用程序?qū)蛑性{(diào)用的依賴（在 V0.68 中發(fā)布）。
• Fabric Renderer：移除了應(yīng)用程序?qū)蛑薪M件渲染的依賴（在 V0.68 中發(fā)布）。
• Bridgeless Mode：移除了應(yīng)用程序?qū)蛑衅渌糠郑ㄈ珏e(cuò)誤處理、全局事件發(fā)射器、計(jì)時(shí)器等）的依賴（在 V0.73 中發(fā)布）。

V0.74 中的新特性

從 V0.74 開始，一旦你啟用了新架構(gòu)，你會(huì)看到“無橋模式”已自動(dòng)啟用。然而，新架構(gòu)本身默認(rèn)仍未啟用。

當(dāng)你在 V0.74 中啟用新架構(gòu)時(shí)，你會(huì)在 Metro 日志中看到如下兩行：

這就對(duì)了 ??。從 React Native V0.74 開始，啟用新架構(gòu)后，無需手動(dòng)啟用無橋模式 ??。

新架構(gòu)：批量 onLayout 更新

另一個(gè)好消息是，React Native 團(tuán)隊(duì)不僅將新架構(gòu)的無橋模式設(shè)為默認(rèn)，還改進(jìn)了此架構(gòu)，以處理批量 onLayout 更新（在單個(gè)渲染中執(zhí)行多個(gè)更新）。這種優(yōu)化通過減少渲染期間的布局相關(guān)計(jì)算來提高性能。

“onLayout” 屬性

React Native 中的 onLayout 屬性用于處理組件的布局（位置）變化。當(dāng)組件的布局發(fā)生變化（由于掛載、調(diào)整大小、旋轉(zhuǎn)或其他因素）時(shí)，onLayout 回調(diào)函數(shù)會(huì)被觸發(fā)。

你可以像下面這樣使用這個(gè)屬性，根據(jù)更新的布局信息執(zhí)行操作。

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

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

假設(shè)組件 <App/> 如下所示，每個(gè) View 在掛載時(shí)觸發(fā) onLayout 回調(diào)函數(shù)。

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
    notallow={() => {
     console.log('FIRST View invoked')
     setState1(true) // View 掛載時(shí)更新 state1
    }}></View>

   <View
    notallow={() => {
     console.log('SECOND View invoked')
     setState2(true) // View 掛載時(shí)更新 state2
    }}></View>

   <View
    notallow={() => {
     console.log('THIRD View invoked')
     setState3(true) // View 掛載時(shí)更新 state3
    }}></View>
  </View>
 )
}

現(xiàn)在，在 React Native V0.73 中，你會(huì)看到如下輸出 ??。

每次執(zhí)行 onLayout 回調(diào)時(shí)都會(huì)重新渲染整個(gè)組件。

在 React Native V0.74 中啟用新架構(gòu)后的輸出 ??。

性能驚人??。在執(zhí)行所有 3 個(gè) “onLayout” 回調(diào)時(shí)，組件只重新渲染了一次。

關(guān)于 “onLayout” 批量更新的總結(jié)如下圖 ??。

新項(xiàng)目使用 Yarn 3

Yarn 3 現(xiàn)在是通過 React Native Community CLI 初始化的新項(xiàng)目的默認(rèn) JavaScript 包管理器。它取代了已被棄用且之前用作默認(rèn)的 Yarn Classic（1.x）。

Yarn 3 加快了安裝和更新依賴項(xiàng)的過程，并優(yōu)化了依賴項(xiàng)的存儲(chǔ)方式。

結(jié)論

React Native 版本 0.74 在組件布局、架構(gòu)、批量 onLayout 更新和與 Yarn 3 的集成方面引入了重要改進(jìn)。