React基礎

一.react簡介

1.起源於facebook，2013年5月開源

2.特點：

I.宣告式設計。（宣告式是告訴計算機做什麼，不管他怎麼做 如map。而命令式式告訴計算機怎麼做 如for。）

II.高效

III.靈活

IV.jsx

V.元件

VI.單向資料流

3.虛擬DOM:一個真實的js物件，直接操作DOM會發生迴流，成本過高

4.迴流與重繪

迴流：當render樹中的一部分或全部因為大小、邊距等問題發生改變而需要重建的過程

重繪：當元素的一部分屬性發生變化，如外觀和背景，不會引起佈局變化而重新渲染的過程

迴流一定重繪，重繪不一定迴流

5.瀏覽器如何渲染頁面

①HTML解析器，解析html結構，生成DOM樹

②CSS解析器，解析css檔案及內聯樣式表，生成樣式表

③將DOM樹和樣式表結合生成render樹（每個DOM元素都有一個方法，用來接收樣式表資訊，返回一個render物件，把這些render物件統一編譯生成render樹）

④render樹渲染完畢後瀏覽器會根據樣式表來決定當前元素在頁面的位置

6.專注檢視層:專注於提供清晰，簡潔的view解決方案

　　注：vue和react本質是vc框架，配合第三方（如;vuex）才是mvc框架

7.函式化程式設計（程式設計正規化）結構化程式設計的一種

　　主要思想：把問題的解決方案寫成一系列巢狀的函式呼叫

①純函式  輸入什麼就輸出什麼，不依賴外部環境的狀態。

如：Array.slice(不改變原陣列)  純函式

　　Array,splice(改變原陣列)    不是純陣列

優點：有效降低系統的複雜性，可快取性

②科裡化函式  傳遞給函式一部分引數來呼叫它，讓它返回一個函式去處理剩下的引數

如：對var add=(x,y)=>x+y科裡化

      　 var add=(a)+(b)=>a+b  add(3)(2)   //5

是一種“預載入”函式的方法，通過傳遞較少的引數，得到一個已經記住了這些函式的新函式，是一種對引數的“快取”

函數語言程式設計的優點:

a:程式碼簡潔，開發快速

b:接近自然語言，易於理解

c:更方便的程式碼管理，

d:易於“併發程式設計”

e:程式碼的熱升級

8.vue和react的區別

相同點：①都是用虛擬DOM

　　　　②都提供了響應式和元件化的檢視元件

　　　　③將注意力集中保持在核心庫，而其他功能如路由和全域性狀態管理交給其他的庫

不同點：①優化效能方面 react有自己的一套方法，用來減少一些不必要的虛擬DOM

　　　　②react用的是jsx語法，而vue是將html,js,css放到vue檔案裡

　　　　③react的css寫在單獨的檔案裡，vue寫在vue檔案裡

　　　　④react約束小靈活性大，使用js語法多，適合開發大專案

　　　　   vue約束大靈活性小，適合快速開發專案

React的生命週期

當元件第一次渲染的時候執行哪些生命週期？

constructor--->componentWillMount--->render--->componentDidMount

1.constructor

初始化

當前生命值週期可以定義當前元件所需要的狀態

當前生命週期函式必須寫super，否則就會報錯或者this的指向發生改變

如果在super和constructor中沒有傳遞props這個引數的話是訪問不到this.props屬性的

2.componentWillMount

元件掛載前

在當前生命週期函式裡可以訪問到props屬性，在這裡可以接收外部屬性，同時可以將外部屬性轉變成內部屬性

在當前生命週期函式裡不需要呼叫setState,因為當前函式執行完畢後會自動執行render

3.render

a.render函式什麼時候會執行？

當this.state,this.props發生改變的時候，會執行render函式

b.this.state/this.props發生改變的時候會執行哪些生命週期函式

　　this.state:

　　　　shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate

　　this.props

　　　　componentWillReveiceProps--->shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate

c.render函式執行的時候會將虛擬DOM和資料相結合，快取一份虛擬DOM，當資料發生改變的時候會將虛擬DOM與快取的虛擬DOM作比較（diff演算法），比較完畢以後，將需要修改的虛擬DOM進行批量修改，減少不必要的更新。

d.diff演算法

新舊兩個虛擬DOM的對比就是diff演算法

4.componentDidMount

render函式執行後，componentDidMount這個生命週期函式就會執行，在這個生命週期函式裡可以進行fatch請求，獲取真實DOM

5.componentWillUnMount

元件銷燬

6.shouldComponentUpdate

當this.state,this.props發生改變時，會執行render函式

該生命週期函式必須返回一個布林值，如果返回true,則繼續執行下面的生命週期函式；

　　　　　　　　　　　　　　　　　如果返回false,則下面的生命週期函式不執行。

該生命週期函式是用來判斷DOM是否更新的，而不是用來判斷資料是否更新的（不管返回值是true還是false，this.state裡的資料都會改變，但是DOM值不會改變）

該生命週期函式可以做一些相關操作減少虛擬DOM不必要的更新（利用接收到的兩個引數props,state來比較）

7.componentWillUpdate

更新前  虛擬DOM與資料相結合，但沒有真正的DOM結構

8.componentDidUpdate

更新後  資料與模板結合可以產生真正的DOM結構，在這裡可以獲取到資料更新後最新的DOM結構

9.componentWillReceiveProps

當外部屬性發生變化的時候就會執行當前生命週期函式，當前生命週期函式會有一個新的引數props

操作DOM的兩種方式：

 ref="list"      this.refs.list

 ref={(tagName)=>{this.key=tagName}}   this.key

react生命週期函式哪些只執行一次？

constructor 

componentWillMount

componentDidMount

componentWillUnMount

react生命週期函式哪些可以執行多次？

render

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillReceiveProps