React 初探

目前在前端開發領域，框架Angular、react和vue佔據着主流的地位並且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和angular採用了雙向數據綁定的MVVM模式，而react虛擬Dom沒有雙向數據綁定機制，須要經過API來實現input的雙向場景。下面主要對react的一些特性和使用進行分析。
1、 一切都是組件

1 組件本質
React 的核心思想是：封裝組件。各個組件維護本身的狀態和 UI，當狀態變動，自動從新渲染整個組件。
基於這種方式的一個直觀感覺就是咱們再也不須要不厭其煩地來回查找某個 DOM 元素，而後操做 DOM 去更改 UI。

2 建立組件方式
(1)函數式定義的無狀態組件
function HelloComponent(props, / context /) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
(2)es5原生方式React.createClass定義的組件
React.createClass是react剛開始推薦的建立組件的方式，這是ES5的原生的JavaScript來實現的React組件。
(3)es6形式的extends React.Component定義的組件
React.Component是以ES6的形式來建立react的組件的，是React目前極爲推薦的建立有狀態組件的方式，最終會取代React.createClass形式；相對於React.createClass能夠更好實現代碼複用。

2、react的生命週期
在react中觸發render的四種方式爲：
• 首次渲染Initial Render
• 調用this.setState （並非一次setState會觸發一次render，React可能會合並操做，再一次性進行render）
• 父組件發生更新（通常就是props發生改變，可是就算props沒有改變或者父子組件之間沒有數據交換也會觸發render）
• 調用this.forceUpdate

3、react虛擬Dom技術
1 傳統的頁面開發，或多或少會牽扯到dom操做，而進行dom操做時，就會有相應的各類優化策略來儘量地減小頁面從新佈局和重繪的次數。
2 好比下面dom批量更新的優化就主要有三種：
1 使用documentFragment進行dom批量更新，而後一次性更新到document上
2 克隆你將要更新的node，在克隆的node上進行dom批量更新，而後克隆的node和原始的node進行交換
3 先隱藏將要更新的node,而後進行dom批量更新，最後從新顯示隱藏的node
傳統的這種手工的批量更新複雜且易錯，而React的虛擬DOM技術讓咱們遠離了這種複雜，咱們無需再時刻考慮什麼時候以及如何作DOM性能調優。

基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React會產生如下狀況：觸發相應組件render方法；從新構建新的虛擬DOM樹；將當前新的虛擬DOM樹和上一次的舊樹進行對比；獲得DOM結構的區別，計算出最小變化集，進行實際的瀏覽器DOM更新（批量更新）。
儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要因某個數據的變化而考慮如何更新到一個或多個具體的DOM元素，無需再寫額外的代碼來作性能優化，將之徹底交給React類庫來作，而咱們只須要關心在相應數據狀態下如何實現相應組件的render方法便可，使得開發簡單。
那麼使用了虛擬DOM技術的React性能到底如何呢，究竟是徒有虛名仍是貨真價實呢，接下來咱們來看看React和其餘一些流行框架的性能比較。

4、React小結
1 ReactJs是基於組件化的開發，因此最終你的頁面應該是由若干個小組件組成的大組件。
2 能夠經過屬性，將值傳遞到組件內部，同理也能夠經過屬性將內部的結果傳遞到父級組件(留給你們研究)；要對某些值的變化作DOM操做的，要把這些值放到state中。
3 爲組件添加外部css樣式時，類名應該寫成className而不是class;添加內部樣式時，應該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4 組件名稱首字母必須大寫。
5 變量名用{}包裹，且不能加雙引號。