React初識整理（一）

 

1、React的特色

一、自動化的UI狀態管理：自動完成數據變化與界面效果的更新。 

二、虛擬DOM：建立1個虛擬的dom節點樹，放在內存裏（內存修改數據效率高），數據變化時先修改內存裏的虛擬DOM，而後與頁面的DOM進行對比，React能夠作優化，優化後可只修改變化的部分，縮小節點更改的範圍，從而提升效率。（正常狀況下改變節點後要從新渲染頁面，效率慢）。

三、組件化開發：管理頁面的各功能，將1個功能視爲1個組件。每一個組件均可以有各自的結構、樣式、行爲，而後把全部的組件拼合起來的開發方式。單頁應用的實現方式。

四、徹底在js中定義UI：一個組件就是1個js。

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

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

七、單向數據流：只能父級傳子級，便於追蹤數據的來源。

2、建立一個React應用

一、引入兩個React的在線js文件：

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

　　

二、使用：

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

　　②建立元素：React.createElement()

　　　　 - 參數1：元素名

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

　　　　 - 參數3：標籤內容，能夠是文本，也能夠是另外一個元素對象。

三、JSX語法

　　 ①引入JSX編譯器 babel.min.js ，而後在script裏寫入type值爲text/babel，讓瀏覽器認爲該代碼爲JSX代碼。可是該方法編譯速度很慢，效率低。

　　 ②JSX規則與XML一致：

　　　　- 容許嵌套

　　　　- 標籤必須嚴格閉合

　　　　- 屬性：

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

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

　　　　　　 - 能夠自定義屬性

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

　　　　

　　　　- 引用組件用<>尖括號

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

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

3、React的組件

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

　　二、組件分類：

　　　　 - 無狀態組件：普通函數定義，無狀態，沒有生命週期，可以優化性能。

　　　　

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

　　　　

 

　　三、組件規範

　　　　 - 每一個組件必須有返回值，若是返回值又是一個組件則必須有且僅有一個根元素，即return後面必須有1個標籤，要有返回值的起始。

　　　　

　　　　 - 若是返回null/false，編譯時會被替換爲< noscript />

4、數據傳遞的props

　　一、每一個函數的參數裏都有props。從父組件能夠經過屬性傳遞數據到子組件。獲得的對應屬性值可用props調用。

　　二、數據能夠在組件之間傳遞，不過只能是單向，由父傳子。

　　三、經過自定義屬性傳遞

　　　　 - 無狀態組件：直接用props傳遞

　　　　

　　　　 - 有狀態組件：用this.props傳遞

　　　　

　　四、經過文本內容傳遞：

　　　　 - 無狀態組件：

　　　　

　　　　- 有狀態組件：

　　　　

 

5、給組件單獨設置樣式

　　經過class屬性來設置樣式使得組件的內聚度不夠，能夠經過組件的style來爲每一個組件單獨設置樣式。（如有短線鏈接的要使用駝峯命名）

　　

 

6、組件狀態更新（state）

　　一、使用ref獲取節點，利用DOM完成節點操做 　　

　　二、使用state對象：

　　　　 - 初始化： 在constructor裏初始化

　　　　

　　　　- 使用：直接用this.state進行調用state。

　　　　

　　　　 其中onClick={this.addCount}是xml裏的事件處理方式，也能夠直接在花括號裏寫函數，可是當函數體較大時，能夠單獨定義。

　　三、函數定義方法：在render前（同級）定義函數。

　　　　 - 事件綁定的時候，即僅限事件處理函數，該函數裏的this指向被改變成了undefined，因此改回來.

　　　　 - 方法一：在調用函數裏寫onClick={this.addCount.bind(this)},強行將this綁定到以前的this上

　　　　 - 方法二：使用箭頭函數 addCount = ()=>{}

　　　　

7、props和state的區別

　　一、props：

　　　　 - 用於在組件之間傳遞數據。

　　　　 - 經過自定義屬性或標籤之間的內容傳遞。

　　　　 - 單向傳遞，只能父傳子。

　　　　 - 能夠手動設置其值，但不會更新組件狀態。

　　二、state：

　　　　 - 每一個組件均可以初始化state對象。

　　　　 - state不能傳遞，傳遞只能用props

　　　　 - 能夠設置值，對應的組件狀態會更新，能夠經過響應式更改UI節點

　　　　 - 設置值的方法必須是setState，而不是直接使用this.state。

8、事件處理中的this

　　一、在ES6的類中，事件處理方法的this爲undefined。

　　二、解決辦法：

　　　　 - 在構造函數中將當前對象綁定給方法中的this。

　　　　

　　　　- 使用箭頭函數定義方法。

　　　　

　　　　- 在綁定事件時使用bind方法。

　　　　

　　　　- 在綁定事件時使用箭頭函數。