React Native之React基礎
React Native 的基礎是React， 是在 web 端非常流行的開源 UI 框架。要想掌握 React Native，先了解 React 框架還是很有幫助的。主要理解三個概念：組件、狀態和 JSX。
使用組件的方式描述 UI
使用組件的方式描述 UI在 React 中，所有的 UI 都是通過組件去描述和組織的。可以認為，React 中所有的元素都是組件，具體而言分為兩種。
內置組件。內置組件其實就是映射到 HTML 節點的組件，例如 div、input、table 等等，作為一種約定，它們都是小寫字母。
自定義組件。自定義組件其實就是自己創建的組件，使用時必須以大寫字母開頭，例如 TopicList、TopicDetail。
和 DOM 的節點定義類似，React 組件是以樹狀結構組織到一起的，一個 React 的應用通常只有一個根組件。
使用 state 和 props 管理狀態
React 的核心機制是能夠在數據發生變化的時候自動重新渲染 UI，那么勢必要有一個讓我們保存狀態的地方，這個保存狀態的機制就是 state。而 props 就是類似于 Html 標記上屬性的概念，是為了在父子組件之間傳遞狀態。
理解 JSX 語法的本質
從本質上來說，JSX 并不是一個新的模板語言，而可以認為是一個語法糖。也就是說，不用 JSX 的寫法，其實也是能夠寫 React 的。
JSX 其實是一種語法糖。理解這一點非常重要，因為它意味著兩點：
JSX 的表達能力等價于 JavaScript 的表達能力，那么所有我們可能需要的機制，比如循環、條件語句等等，JSX 其實都能靈活表達。
JSX 幾乎不需要學習，只要你會用 JavaScript，就也會用 JSX。
所以這也是 React 的“模板語言”區別于 Angluar 和 Vue 的地方，JSX 不是一個新的概念，而只是原生 JavaScript 的另一種寫法。但是換成這種寫法，就會大大降低你上手 React 的難度。
2. React中的核心概念
1 虛擬DOM（Virtual DOM）
2 Diff算法（虛擬DOM的加速器，提升React性能的法寶）
1. 虛擬DOM（Vitural DOM）
React將DOM抽象為虛擬DOM，虛擬DOM其實就是用一個對象來描述DOM，通過對比前后兩個對象的差異，最終只把變化的部分重新渲染，提高渲染的效率。
為什么用虛擬dom，當dom反生更改時需要遍歷 而原生dom可遍歷屬性多大231個 且大部分與渲染無關 更新頁面代價太大。
VituralDOM的處理方式
1 用 JavaScript 對象結構表示 DOM 樹的結構，然后用這個樹構建一個真正的 DOM 樹，插到文檔當中
2 當狀態變更的時候，重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異
3 把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了
浙公網安備 33010602011771號