A Javascript library for building user interfaces
用于構(gòu)建用戶界面的JavaScript庫
React是Facebook在2011年開發(fā)的前端js庫，當(dāng)時FB對市場上的mvc框架都不滿意，于是乎自己寫了一套，用來架構(gòu)Instagram，直到2013年開源。React是基于組件，構(gòu)建可復(fù)用的UI組件。
ReactJS官網(wǎng)地址：http://facebook.github.io/react/
本小節(jié)主要從React的幾個特點(diǎn)來進(jìn)行介紹。
一、用戶界面
首先先明確React不是完整的mvc框架，它更多的是關(guān)注在V(view)這一層，負(fù)責(zé)視圖層。React幫助我們把界面分成各個獨(dú)立的組件，每個組件都可以互相組合、嵌套成界面。
小知識點(diǎn)補(bǔ)充：
MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個部件里面，在改進(jìn)和個性化定制界面及用戶交互的同時，不需要重新編寫業(yè)務(wù)邏輯。
MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開。當(dāng)然這些事 ViewModel 已經(jīng)幫我們做了，它可以取出 Model 的數(shù)據(jù)同時幫忙處理 View 中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。
二、組件化
React的本質(zhì)是前端組件化框架。你可以在項(xiàng)目中定義小組件，并將它們組合起來行程更大的組件，無論是大小的組件，都可以實(shí)現(xiàn)復(fù)用。
組件化的兩個特點(diǎn)：封裝、復(fù)用。
class MyTasks extends Componet{
constructor(props){
super(props)
this.state = {
list:[]
}
}
add(something){
const cur = this.state.list
this.setState({
list:cur.push(something)
})
}
render(){
return (
<div>
<Tasks lists = {this.state.list}/>
<div/>
)
}
}
//以上MyTasks的寫法就是一個組件的封裝過程（視圖、數(shù)據(jù)、邏輯）
//組件的引用的主要核心是props的傳遞和組件的復(fù)用
寫react組件的注意事項(xiàng)：
1、組件的名稱首字母必須大寫。用大小寫是為了區(qū)別通過HTML標(biāo)簽定義的JSX，大寫的組件定義時，是為了讓React.Component識別進(jìn)行定義，否則會被當(dāng)做普通的element去渲染。
三、虛擬DOM
在web開發(fā)中，用戶的操作總是需要將實(shí)時變化反應(yīng)到UI上，傳統(tǒng)的Jquery是通過頻繁的操作DOM，對頁面進(jìn)行新增、刪除、替換節(jié)點(diǎn)等多個操作。復(fù)雜和頻繁的DOM操作是性能瓶頸產(chǎn)生的重要原因。
React引入了虛擬DOM的機(jī)制，React的虛擬DOM將頁面中的UI轉(zhuǎn)換為js對象的形式來表示，當(dāng)有數(shù)據(jù)變化，會重新構(gòu)建一個新的描繪DOM的js對象，將前后DOM的js對象進(jìn)行Diff算法比較，只有不同的地方才進(jìn)行重新計算，等所有的變化都批量處理后，才會進(jìn)行DOM更新。
因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)，性能極高，而對實(shí)際的DOM操作也只是diff算法中算出來不同的部分，從而提高了性能。開發(fā)者不需要過多的關(guān)注如何改變DOM元素，只需要關(guān)注數(shù)據(jù)的變動即可。
四、JSX
JSX是JavaScript和XML結(jié)合的一種格式。
不是React獨(dú)有的，JSX是一個標(biāo)準(zhǔn)，其他項(xiàng)目也可以使用。
JSX語法是無法被瀏覽器所解析，通過babel編譯，轉(zhuǎn)換成js運(yùn)行。
寫在最后
1、ReactJs是基于組件化開發(fā)的，一個頁面可以通過多個小組件組合而成，復(fù)用性高。
2、運(yùn)用了jsx語法，提高了可讀性。
3、引入了Vdom機(jī)制，不再頻繁操作DOM節(jié)點(diǎn)，提高了頁面的性能。
以上的幾個React小特點(diǎn)，會在后面的幾個小篇章中繼續(xù)深入研究，歡迎關(guān)注我以及各種技術(shù)交流哈！
