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號