一、React的特點

1、自動化的UI狀態管理：自動完成資料變化與介面效果的更新。 

2、虛擬DOM：建立1個虛擬的dom節點樹，放在記憶體裡（記憶體修改資料效率高），資料變化時先修改記憶體裡的虛擬DOM，然後與頁面的DOM進行對比，React可以做優化，優化後可只修改變化的部分，縮小節點更改的範圍，從而提高效率。（正常情況下改變節點後要重新渲染頁面，效率慢）。

3、元件化開發：管理頁面的各功能，將1個功能視為1個元件。每個元件都可以有各自的結構、樣式、行為，然後把所有的元件拼合起來的開發方式。單頁應用的實現方式。

4、完全在js中定義UI：一個元件就是1個js。

5、JSX：JavaScript XML。使React的標籤寫法像html那樣來編寫

6、只是MVC構架中的V：MVC是一種架構模式，model（模型：獲取資料）→ view（檢視：渲染）→controller（控制器：關聯資料與檢視）。

7、單向資料流：只能父級傳子級，便於追蹤資料的來源。

二、建立一個React應用

1、引入兩個React的線上js檔案：

<script crossorigin src="js/react.development.js"></script>
 <script crossorigin src="js/react-dom.development.js"></script>

　　

2、使用：

　　①渲染到頁面：ReactDOM.render();

　　②建立元素：React.createElement()

　　　　 - 引數1：元素名

　　　　 - 引數2：元素屬性，格式為JSON。多個單詞用駝峰命名，class屬性要寫成className

　　　　 - 引數3：標籤內容，可以是文字，也可以是另一個元素物件。

3、JSX語法

　　 ①引入JSX編譯器 babel.min.js ，然後在script裡寫入type值為text/babel，讓瀏覽器認為該程式碼為JSX程式碼。但是該方法編譯速度很慢，效率低。

　　 ②JSX規則與XML一致：

　　　　- 允許巢狀

　　　　- 標籤必須嚴格閉合

　　　　- 屬性：

　　　　　　 - 大部分屬性和HTML標籤一致

　　　　　　 - 兩個特殊：for→htmlFor class→className

　　　　　　 - 可以自定義屬性

　　　　- 引用變數必須用 {}花括號，花括號中可做運算

　　　　

　　　　- 引用元件用<>尖括號

　　　　- 註釋，{/*註釋*/} ，要加花括號

　　　　- style屬性要寫成花括號形式，如：style={{color:"red"}};

三、React的元件

　　1、元件是編寫React應用的基礎，一個應用就是由大大小小的元件組合而成。

　　2、元件分類：

　　　　 - 無狀態元件：普通函式定義，無狀態，沒有生命週期，能夠優化效能。

　　　　

　　　　- 有狀態元件：推薦ES6語法定義，React內部會建立例項，並擁有完整的生命週期。

　　　　

 

相關推薦