React Native 學習手冊 讀書筆記之第二章

書本資訊: 歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一 譯。如果你有興趣讀一讀請多購買書籍。這本書寫得不錯!

以下文章常會見到 RN 字樣，我用來代表 React Native。

第二章主要說明 RN 的運作方式，不會寫的太難，但我會試圖把一些中文翻譯改用英文寫筆記，例如假如我寫到 "元件"，可能有時候會用 "Component" 表達。

說真的，用 JavaScript 來寫 Mobile App 我真的覺得很怪...

1. 理解 RN 的底層技術，第一件要先想到 React 的功能之 ~ Virtual DOM.
2. Virtual DOM: 沒有 virtual DOM 的時候，以前的 DOM 的渲染與更新是一個成本很高的步驟，大量的 DOM 甚至會造成效能的影響，簡單一句話就是『js 很快但 DOM 很慢 』，相較於此，React 使用記憶體版本的 DOM，計算必要的改變，只顯示有需要改變的 DOM。
   
   這背後的演算法到底是如何我其實也不是很懂...  (另外什麼叫做記憶體版本... 我也不是很懂，若有人知道方便留言一下嗎 ><  我目前是猜在記憶體算一算在 render 出來)

Virtual DOM 三步驟:
狀態改變 -> 計算差異(diff) -> 重新顯示有差異的 DOM。

因為 Virtaul DOM 在效能上帶來好處，這也就是為什麼它很厲害的原因吧。
你可以參考這些文章，或是自己 google，Virtual DOM 出來好一陣子了，現在文章應該很多: 

• 迷之前端轮子 - 实现一个简单的 Virtual DOM
• 怎么更好的理解虚拟DOM?

RN 會呼叫 Objective-C,  Java 的 API 來顯示 UI 元件 (element)。RN 會把對應的標籤(元件)，轉換為符合平台的元件，所以像是 <View> 這個標籤在 ios 上會被轉為 <UIView>。

React Native currently supports iOS and Android. Because of the abstraction layer provided by the Virtual DOM, React Native could target other platforms, too—some‐ one just needs to write the bridge. - Learning React Native  p.9

意思就是，RN 支援 ios/android, 而且抽象層是 Virtual DOM,  因此 RN 也可以針對其他平台，只要有人寫出那個 Bridge(橋接) 來。


顯示的生命週期

RN 的顯示生命週期跟 React 大部分相同，唯一的不同在於顯示的部分需要橋接 (你就當作 bridge)，轉譯 JavaScript 並呼叫平台底層的 UI 元件。


在 React Native 中使用 Component

• RN 使用的 component 跟 React 不同，大部分元件都有特定的元件名稱，少數必須針對不同平台，如 NavigatorIOS。
• 平台專屬的元件名稱有特定命名規則 (主要是放在後綴)，如 XXXXAndroid, XXIOS。
• 你可以參考 UIExplorer，裡面有各種 component 應用的 UI 樣子 (https://github.com/facebook/react-native/tree/master/Examples/UIExplorer)，clone 下來跑跑看...。
• 以 NavigatorIOS 來說，很顯然它不能在 Android 上使用，還好顯示用的元件是可以根據平台做替換的，你也可以指定平台專用的元件，例如 nav.ios.js 以及 nav.android.js。

關於 JXS

jsx 重視分離關注高於分離技術。 page 10.

(在 React 剛開始時，大多數的人對於把 HTML/CSS/JavaScript 寫在一起感到疑惑...(me, too...)，甚至有的人是因為不喜歡 html 夾雜在 JavaScript)。

• RN 因為是在一個沒有瀏覽器的世界中。(要注意有些東西不存在於 RN 中，如 <div>)。
• RN 的 .js 其實實際上可以說是 JSX 檔案。(開發 React Native 是一定會用到 jsx 的)。
• RN 中撰寫 CSS 需要使用物件樣式來表示，只是用 Object 來表示，久而久之會習慣啦!，有些 CSS 的設定會受到限制，你不是在寫 web，主要的 CSS 佈局會以 Flexbox 為主。但是有些連著的單字需要以小駝峰式命名法（lower camel case）表示 (第一個單字以小寫字母開始；第二個單字的首字母大寫)，例如在 web 上的 css 背景顏色會用 background-color，但在 RN 的 CSS 表達則要轉換為 backgroundColor，其他的也是，會變成 fontSize, marginBottom, textAlign...。