React 產(chǎn)生的背景

react是Facebook官方推出的一個(gè)javascript的庫。Facebook為什么還要開發(fā)一款新的框架呢？原因是 Facebook遇到了一些新的問題：如何構(gòu)建數(shù)據(jù)不斷變化的大型應(yīng)用。如何解決由數(shù)據(jù)不斷變化帶來的問題。

數(shù)據(jù)變化會(huì)帶來兩個(gè)非常嚴(yán)重的問題，第一要進(jìn)行大量的dom操作;第二邏輯也會(huì)變得非常復(fù)雜。數(shù)據(jù)和邏輯密切相關(guān)，數(shù)據(jù)變化的時(shí)候，邏輯也會(huì)發(fā)生變化。在開發(fā)中，當(dāng)你修改一個(gè)已有項(xiàng)目的時(shí)候，改動(dòng)一個(gè)地方的代碼，往往會(huì)產(chǎn)生許多意料之外的后果，這就是因?yàn)閿?shù)據(jù)和邏輯之間的關(guān)系非常復(fù)雜，牽一發(fā)而動(dòng)全身，所以數(shù)據(jù)變化會(huì)導(dǎo)致這樣兩種后果。

那react如何來解決這兩個(gè)問題呢？針對(duì)第一個(gè)問題（大量操作dom）react的操作是采用自動(dòng)dom操作，在react中，你不需要手動(dòng)進(jìn)行dom操作，只需要告訴react要展示什么內(nèi)容，react會(huì)自動(dòng)來操作dom。針對(duì)第二個(gè)問題(邏輯復(fù)制)，react是把狀態(tài)和內(nèi)容顯示對(duì)應(yīng)起來，這樣我們就可以一目了然的知道，狀態(tài)變化，內(nèi)容會(huì)隨之變化，從而理清程序的邏輯。

React 是什么：

react 其實(shí)就是一個(gè)做UI的庫，具體來說是做UI組件的庫，專注于做MVC中V。所以請(qǐng)記住React 并不是一個(gè)MVC的框架

React 的特點(diǎn)：

• 聲明式： 你只需要聲明給react顯示什么內(nèi)容，至于如何把這些內(nèi)容顯示到頁面上，是由react來幫你完成的
• 高效：React 通過對(duì)DOM的模擬，最大限度的減少與DOM的交互。
• 靈活：React 可以與已知的庫或框架很好地配合

React 的核心：

React的核心是組件，組件的設(shè)計(jì)目的是提高代碼的復(fù)用率，降低測試難度和代碼復(fù)雜度。

• 組件提高代碼復(fù)用率：組件將數(shù)據(jù)和邏輯封裝，類似面向?qū)ο笾械念?。我們可以將通用的邏輯和?shù)據(jù)封裝起來，從而能提高代碼的復(fù)用率。
• 降低測試難度：組件高內(nèi)聚，低耦合，很容易對(duì)單個(gè)組件進(jìn)行測試，通過模擬他的輸入，或者輸出，來測試組件的功能是否完善。
• 降低代碼復(fù)雜度：直觀的語法可以極大地提高可讀性，降低代碼的復(fù)雜度和維護(hù)難度。

React 的性能秘訣：

我們知道DOM更新通常是比較昂貴的。而React為了盡可能地減少對(duì)DOM的操作，提供了一種不同的而又強(qiáng)大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM, 它是React抽象出來的一個(gè)對(duì)象，描述dom應(yīng)該什么樣子的，應(yīng)該如何呈現(xiàn)。通過這個(gè)Virtual DOM去更新真實(shí)的DOM。

為什么通過這多一層的Virtual DOM操作就能更快呢？ 這是因?yàn)镽eact有個(gè)diff算法，更新Virtual DOM并不保證馬上影響真實(shí)的DOM，React會(huì)等到事件循環(huán)結(jié)束，然后利用這個(gè)diff算法，通過當(dāng)前新的dom表述與之前的作比較，計(jì)算出最小的步驟更新真實(shí)的DOM。

React 的基本語法：

react 對(duì)象 createElement 方法：定義一個(gè)虛擬dom
第一個(gè)參數(shù)：表示虛擬dom的名稱（任意元素的名稱,還可以是一個(gè)組件的名稱）
第二個(gè)參數(shù)：表示這個(gè)虛擬dom上一些必要的屬性（比如：id, className, title等）
第三個(gè)參數(shù)：表示該虛擬你dom 中所以子元素（定義文本節(jié)點(diǎn)，我們可以不用書寫createElement）

ReactDOM 中render 方法: 是將虛擬你dom渲染到頁面
第一個(gè)參數(shù)：表示虛擬dom
第二個(gè)參數(shù)：表示真實(shí)dom容器元素
第三個(gè)參數(shù)：表示一個(gè)回調(diào)函數(shù)

組件：createClass
如果一個(gè)虛擬dom 復(fù)用多次，通常我們將它封裝在一個(gè)組件中。通常用組件創(chuàng)建一組虛擬DOM
參數(shù)是一個(gè)對(duì)象，對(duì)象中的屬性和方法是對(duì)組件的說明。
有個(gè)屬性叫render 方法，是將組件中的虛擬dom 輸出。
所以我們將虛擬dom定義在render 方法中。
Render: 返回值是虛擬dom樹
作用域是組件當(dāng)前對(duì)象。
組件需要通過React.createElement()才能渲染到頁面中