React總結 簡講Diff算法

做微信前端開發做了一段時間了，對一直使用的React做一個總結

React   的優點我主要體會在更新Dom和響應時間上。 類似一個“狀态機“，UI元件化，單項資料流（友善打理，自上而下的渲染方式）

React 的diff算法，利用虛拟Dom實作了非常好的渲染系統。利用setstate等一些渲染函數。讀入目前狀态，将其轉化目标頁面的一個虛拟表現。然後利用diff算法

計算虛拟頁面和真實Dom的差異，然後對這些差異進行最少的更新。

React的主要的優勢就是在最小重繪了Dom操作，避免不必要的更新。

React發源自Facebook的PHP架構XHP的一個分支，Xhp在每次有請求進來的時候都渲染整個界面。React的産生就是把重新渲染整個界面的PHP的工作方式帶到用戶端應用來。

Diff算法（虛拟DOM）   

一個Web頁面可以看做是一個DOM樹，每一個節點位置的改變，就會導緻整顆樹的改變，React裡面有虛拟DOM，一個被修改後的DOM樹。每次渲染就是虛拟DOM和真是DOM樹通過Diff算法進行重新渲染。Diff的算法複雜度為O（n）

Diff算法之是以為O（n）是從高層往底層進行查找。   很簡單，也有區分。 

1.隻比較同層，如果一層的DOM類型都不同，直接把不同的DOM節點給删去，然後替換上虛拟DOM上被修改的DOM節點。  新增加的DOM節點的子節點就不用檢視了。

2.如果類型相同屬性不同，進行屬性的替換。

3.如果在清單的子節點，比如一個table裡面的子元件，在使用過程中大家應該遇到過，如果沒有給子節點附上獨一無二的key值那麼會進行提示。  隻是在清單當中diff可以利用鍵值對使用插入的方式進行替換。不然類似冒泡排序一個個的替換節點。  如果表中元素沒有獨一無二的key,那麼就會進行提示。當時并沒有影響，但是可能在替換的時候發生問題。

React就類似一個View，元件化（向web componet 看齊），多端同構。

UI由無數的元件嵌套而成，它們存在層級關系。所有有父元件子元件。頂層元件的概念。

View設定好，就必須有資料了。

整體的View劃分好後，通過setState，state，給一些值進行定義。自父元件往子元件傳值直接用props

子元件向父元件傳參數就比較麻煩了。當然我們可以通過函數傳參解決這個問題。

http://blog.csdn.net/qq_26878975/article/details/62052234

DataFlow（單項資料流動）

React是一個視圖庫，但是web沒有資料，那就沒什麼用，首先在頂層元件擷取到資料，通過Ajax或者Fetch來進行擷取資料。 然後通過props傳給每一層的子元件。然後一層層的傳遞下去。最後每個子元件都得到自己渲染所需要的資料，進而完成UI的渲染。（通過函數參數進行子向父傳參）

React的生命周期

在渲染過程中，React會頻繁的建立或者銷毀元件。React為每個元件提供了生命周期鈎子函數去響應不同的時刻，建立，存在和銷毀。

建立時刻

Consructor（props）{

super（）；  //調用弗雷構造器

//設定執行個體的屬性以及組建的特性

}

componentwillMount  首次渲染前被調用。 沒有什麼用。  

render    建立一個虛拟Dom，表示組建的輸出。

隻能通過props，state通路資料。  可以傳回null，false或者react任意元件，必須都是修飾Dom，在其中不能改變元件的狀态或者修改Dom的輸出，隻能有一個組合元件。

componentDidMount

在render方法成功調用并且真實的Dom已經被渲染之後。這就是可以通路原始Dom的生命周期的鈎子函數（react運作在服務端時，該方法不會被調用）

在元件已經渲染好，并且使用者預期互動，使用者改變元件裡面的資料有新的state流入元件樹。

componentwillreceiveprops

react是單向流可以改變父輩子類同時都改變，用componentwillreceiveprops方法會被調用，我們也能更改props對象及更新state的機會。

shouldComponentupdate（優化的時候可以考慮）首次渲染期間或者調用forceUpdate方法後，這個方法不會被調用。

精确優化，在确認某個元件或者它任何子件不需要渲染新的props或者state，該方法傳回false。

componentWillUpdate

元件會在接受到新的props和state進行渲染前調用該方法。

銷毀期

react使用完一個元件，這個元件就必須從Dom中解除安裝随後被銷毀。此時僅有的一個鈎子函數做出響應，完成所有的清理和銷毀工作。

componentwillunmount

函數在組建消亡前被調用，做一些清理工作，在componentDidmount方法中添加的所有任務都需要在該方法中撤銷，比如建立的定時器或者添加的事件監聽器。

JSX與react

jsx寫起來可讀性更高，也更容易調試。React的一個特點是建立一個個獨立的元件。同時JSX以幹淨簡潔的方式，保證了元件中的标簽和業務邏輯相分離，以此來實作一個清晰直覺的方式來描述元件樹。

jsx和HTML的差別

屬性：HTML用内聯的方式給每個節點設定屬性。

條件判斷，jsx可以使用三目運算符，設定變量在屬性中引用，把邏輯放到函數在引用，使用&&運算符

非dom屬性： key dom的渲染，是通過節點來的。   ref：資料一般是單向流，這個父元件對子元件的的一個引用

樣式：内聯樣式，React内聯模式都是駝峰寫法

var style = {

}

React。renderComponent（<div style={styles}>）;

如果不用jsx。     定義元件類 2.定義一個元件類産生執行個體的工廠。 3.。使用工廠來建立ReactElement執行個體