最新換了新的工作環境， 看公司有RN項目，同時也被告知后期也需要去寫RN項目。
所以， 仗著自己有那么點JavaScript的基礎，寫過些vue，就提前學習一下React Native, 不至于真到要開始寫的時候啥都不會。
話不多說，新手入門，總結輸出下這幾天學習的知識點。
React介紹
React框架最早孵化為Facebook內部，2013年5月，Facebook宣布React框架開源。
React框架底層的核心是Virtual DOM，也就是虛擬DOM。
DOM(
Document Object Model，文檔對象模型)，在HTML網頁上，將 構成頁面的 對象元素 組織在一個樹形結構中，用來表示頁面中對象的標準模型就是DOM
React在框架底層設計了一個虛擬DOM，此虛擬DOM 與頁面上的真實DOM相互映射。當業務邏輯修改了React組件中的state/props部分，React框架底層的diff算法會通過比較虛擬DOM 與真實DOM 的差，找出被修改部分，并更新差異部分(即通過調用diff算法計算出變動后的JSON映射文件，最終由Native層將此JSON文件映射渲染到原生App頁面元素上)。
React并不會在state更改的第一時間就去執行diff算法，并立即更新頁面DOM，而是將多次操作匯聚成一次批量操作，又大大提升了頁面更新重回的效率。
React Native介紹
React Native 是一個框架，是一個在JavaScript中使用React JavaScript庫構建移動應用App的框架。
React Native框架是在React框架的基礎上， 底層通過對iOS/Android原生代碼的封裝調用， 結合JavaScript代碼，實現跨平臺的開發。
React Native的工作原理：
-
JSX
JavaScript的語法擴展，類似于XML，推薦使用，易于閱讀和維護。 -
線程
與原生平臺交互時，所有JavaScript操作都在一個線程中完成。
在這條線程上，不僅有React應用程序，還有要處理的所有API調用，所有事件以及所有交互。 - React
-
單向數據流
React和React Native都強調使用單向數據流。整合了從頂層組件到底層組件的單向數據流，使用數據層具有明確的開源，而不是散落在應用程序中，使程序更容易理解。 -
差異化
React采用差異化的思想并將其應用于原生組件。UI以聲明方式渲染，React利用差異化來發送必要的更改。 -
組件思維
React的組件是用戶界面的最小元素，與外界的所有交互都通過state和props進行傳遞。
假如父節點的數據通過props傳遞到子節點，如果相對父節點傳遞的props值改變了，那么其所有的子節點都會重新進行渲染。
state和props
state(狀態)：創建組件時聲明組件狀態，在組件中更新狀態，使用setState()函數。
props(屬性)：創建組件時，屬性作為參數被傳遞，屬性在組件中無法更新。
狀態state是組件所管理的值的集合。創建組件時，state的初始化有兩種方式：
- 使用屬性初始化設定項進行設置
- 使用構造函數進行設置
constructor(){
super()
this.state = {
name ： “React Native”
}
}
狀態更新：
通過調用this.setState(對象)，傳入一個對象，來對已有的state進行更新。
setState()會觸發render()方法，但不會觸發組件的重新渲染。強制更新組件渲染使用forceUpdate()方法。
屬性props是從父組件傳遞下來的值或屬性。在聲明時可以是靜態值或者動態值。
屬性和狀態的區別：
屬性props
|
狀態state
|
|---|---|
| 外部數據 | 內部數據 |
| 不可變 | 可變 |
| 從父組件繼承 | 組件內部創建 |
| 可以由父組件更改 | 只能在組件中更改 |
| 可以作為屬性傳遞下去 | 可以作為屬性傳遞下去 |
| 在組件內部無法更改 | 在組件內部可以更改 |
React Native工作原理
在React框架中， JSX源碼通過React框架最終渲染到了瀏覽器的真實DOM中，而在React Native框架中，JSX源碼通過React Native框架編譯后，通過對應平臺的Bridge實現了與原生框架的通信。
React Native生命周期
初始化階段
此階段一般是初始化組件的props和state的默認值加載階段
此階段為組件開始實例化
componentWillMount()：組件將要開始加載
render()：組件開始根據props和state進行渲染， 一定返回一個子組件/null/false
componentDidMount()：組件加載完畢后更新階段
componentWillReceiveProps(nextProps)：組件接收到新的props
shouldComponentUpdate(nextProps, nextState)：邏輯控制是否需要更新組件，默認為yes，可根據業務邏輯需要不進行更新
componentWillUpdate(nextProps, nextState)：組件即將更新重新渲染， 只有允許更新，才會繼續調用此方法
componentDidUpdate(prevProps, prevState)：組件完成渲染后，返回的參數是更新前的props和state，可與更新后的進行對比處理銷毀階段
componentWillUnmount()：組件將要開始銷毀
入門篇就先總結到這里，感興趣的一起來學習吖。
