一 React 的優點

1.響應式渲染

React 最大的優點在於其響應式渲染，相對於傳統的更新整個頁面的緩慢而言，React 會生成一個虛擬的DOM，當用戶進行操作使狀態有所變化時，React會計算出一個新的虛擬表現，計算出虛擬頁面的當前版本與新版之間的差異，基於這些差異對DOM進行必要的最少更新。

2.靈活的文件模型抽象表現

React 內建了一個自己的UI輕量級模型，以抽象出UI底層的文件模型，這樣做的好處是不論在web頁面，還是原生的iOS和android頁面。他都可以使用同樣的規則來渲染HTML。

3 使用純javascript進行面向元件的開發

二 JSX的使用

1.JSX的介紹

JSX 即JavaScript XML，它是一種在React 元件內部構建標籤的類XML語法，使用JSX可以提高元件的可讀性，因此推薦使用。JSX最終會被轉換為JavaScript。

2.JSX的優點

1⃣️更熟悉：團隊中非開發人員可以輕鬆閱讀程式碼，易讀性強。

2⃣️更加語義化：能將JavaScript程式碼轉為更加語義化的標籤。

3⃣️更加直觀：JSX在大的專案中，會使得上百個元件更為明瞭直觀。

4⃣️抽象化：JSX的抽象了將標籤轉化為javascript的過程。

5⃣️關注點分離：這也是React的核心，旨在將HTML標籤以及生成這些標籤的程式碼緊密聯絡在一起，React鼓勵你為每一個關注點創造一個獨立的元件，並把所有的邏輯和標籤封裝在其中。

3.JSX與HTML不同之處

1⃣️標籤特性採用駝峰式大小寫風格如maxlength在JSX中應寫為 maxLength。

2⃣️所有元素必須閉合如<br> 在JSX中必須寫為<br/>。

3⃣️特性名稱基於DOM API,如class在JSX中為className。

4.JSX怪異之處

1⃣️React元件只能渲染一個根節點，這是由於js的特性，即return語句只能返回單個的值，解決辦法是將要返回的值都包含在一個根物件中。

2⃣️JSX不能使用if語句，可使用三元表示式替代，或者將條件語句移動到JSX外部。

三 props與state

1⃣️props一般為元件被呼叫時給出的，屬於呼叫方，即屬於父級，常用於父給子傳遞屬性，一般情況下認為props是不會變的。

2⃣️state為當前狀態，在與使用者互動需要有所改變時，一般通過狀態的改變來實現，狀態改變後需要通過setstate來更新，會使得已經mounted的內容重新updating。

四 生命週期

分為三部分：mounted － updating － unmounted，在每一個狀態下都有相應的鉤子函式，具體內容如圖所示。