筆者最近接手了一個專案，其為前後端分離，前端使用React，後端使用Java，因本人之前從未使用過React，故決定學習一些關於React的基礎知識，以備後續使用。如有謬誤，歡迎指正。

1.1 React簡介

React把使用者介面抽象成一個元件，通過這個抽象，把程式碼和真實渲染目標隔離開。

1.1.1 專注檢視層

React並不是完整的MVC/MVVM框架，它專注於提供清晰、簡潔的View層解決方案。而又與模板引擎不同，React不僅專注於解決View層的問題，又是一個包括View和Controller的庫。

1.1.2 View DOM

1.1.3 函數語言程式設計

React能重複利用很多函式式方法來減少冗餘程式碼。

1.2 JSX語法

1.2.1 JSX的由來

JSX直接將HTML語法直接加入到JS程式碼中，再通過翻譯器轉換成純JS，不會帶來任何的副作用，反而會讓程式碼更加直觀並易於維護。例如：

1.2.2 JSX基本語法

JSX的官方定義是類XML語法的ECMAScript擴充套件。

1.XML基本語法

JS中的最外層標籤只允許有一個。

標籤一定要閉合。

2.元素型別

HMTL標籤首字母為小寫的是DOM元素，大寫的是元件元素。

3.元素屬性

在JSX中，DOM元素的屬性都是標準規範屬性，但class和for例外，因為在JS中它們是關鍵詞。需把class改為ClassName，for改為htmlFor。而元件屬性完全是自定義的屬性，也可以理解為實現元件所需要的引數。

4.JS屬性表示式

屬性值要使用表示式，只要用{}替換""即可。

5.HTML轉義

React會將所有要顯示到的字串轉義，防止XSS。

1.3 React元件

1.3.1 React元件的構建

React元件的組成如下圖所示：

React元件的構建方法：React.createClass、ES6 Classes和無狀態函式。

1.4 React資料流

在React中，資料是自頂向下單向流動的，即從父元件到子元件。這條原則讓元件之間的關係變得簡單且可預測。

1.4.1 state

常見的MVC框架也非常容易實現互動介面的狀態管理，它們將view與狀態互動的介面解耦，一般將狀態放在Model中管理。但在React沒有結合Flux或Redux框架前，它自身也同樣可以管理元件的內部狀態。在React中，把這類狀態統一稱為state。

1.4.2 props

它是properties的縮寫，props是元件間互相聯絡的一種機制，通俗得說就像方法的引數一樣。

1.5 React生命週期

React元件的生命週期根據廣義定義描述，可以分為掛載、渲染和解除安裝這幾個階段。

1.5.1 掛載或解除安裝過程

元件掛載是最基本的過程，這個過程主要做元件狀態的初始化。

元件解除安裝非常簡單，只有componentWillUnmount這一個解除安裝前狀態。

1.5.2 資料更新過程

更新過程是指父元件向下傳遞props或元件自身執行setStates方法時發生的一系列更新動作。

1.5.3 整體流程

1.6 React與DOM

React已將涉及DOM操作的部分剝離，目的是為了抽象React，同時適用於Web端和移動端。ReactDOM的關注點在DOM上，因此只適合Web端。

1.6.1 ReactDOM

API非常少，只有findDOMNode、unmountComponentAtNode和render。

1.6.2 ReactDOM的不穩定方法

有兩個不穩定方法，unstable_renderSubtreeIntoContainer和unstable_batchedUpdates。

1.6.3 refs

它是react元件中非常特殊的prop，可以附加到任何一個元件上。元件被呼叫時會新建一個該元件的例項，而refs就會指向這個例項。

1.6.4 React之外的DOM操作

React的宣告式渲染機制把複雜的DOM操作抽象為簡單state或props的操作，因此避免了很多直接的DOM操作。但還有一些尚無法避免。