引言
我們知道對于傳統(tǒng)的web開發(fā)方式是通過服務(wù)器或者用戶輸入的交互數(shù)據(jù)高效的動(dòng)態(tài)的反映到復(fù)雜的用戶界面上，但是隨著項(xiàng)目的越來越大棒动，造成難以維護(hù)或者力不從心扛邑⊥┖保基于此死宣，涌現(xiàn)出了許多優(yōu)秀的開源框架，如谷歌的Angular眶掌、Facebook的React等逸爵，本篇文章只是我對React學(xué)習(xí)過程的一個(gè)記錄师倔，現(xiàn)在想想自己當(dāng)初選擇學(xué)習(xí)react原因可能......
React介紹
- React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。
- React主要用于構(gòu)建UI萎攒，很多人認(rèn)為 React 是 MVC 中的 V（視圖）货矮。
- React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站畸陡，并于 2013 年 5 月開源鹰溜。
- React 擁有較高的性能，代碼邏輯非常簡單罩锐，越來越多的人已開始關(guān)注和使用它奉狈。
React特點(diǎn)
- 聲明式設(shè)計(jì)：React采用聲明范式，可以輕松描述應(yīng)用涩惑。
- 高效 ：React通過Virtual DOM仁期，最大限度地減少與DOM的交互。
- 靈活 ：React可以與已知的庫或框架很好地配合。
- JSX ： JSX 是 JavaScript 語法的擴(kuò)展跛蛋。React 開發(fā)不一定使用 JSX 熬的，但建議使用它。
- 組件 ：通過 React 構(gòu)建組件赊级，使得代碼更加容易得到復(fù)用押框，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。
- 單向響應(yīng)的數(shù)據(jù)流：React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流理逊，從而減少了重復(fù)代碼橡伞，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
上面的話可能有點(diǎn)多余晋被，下面就正式開始介紹React基礎(chǔ)知識及使用兑徘。
Virtual DOM（虛擬DOM）
為什么引入Virtual DOM？
在介紹Virtual DOM之前不得不說一下什么是DOM羡洛，DOM挂脑，Document Object Model，即文檔數(shù)據(jù)模型欲侮，它是針對XML但經(jīng)過擴(kuò)展用于HTML的應(yīng)用程序編程接口（API）崭闲。真實(shí)頁面對應(yīng)一個(gè)DOM樹，當(dāng)頁面需要更新時(shí)威蕉，借助DOM提供的API刁俭，可以對其進(jìn)行更新，但是這樣做很消耗性能忘伞，會(huì)使項(xiàng)目變得難以維護(hù)薄翅，而React把真實(shí)的DOM樹轉(zhuǎn)換成Javascript對象樹，即在瀏覽器端用Javascript實(shí)現(xiàn)了一套DOM API氓奈，這就是Virtual DOM翘魄。在使用React開發(fā)時(shí)，當(dāng)需要對真實(shí)DOM進(jìn)行修改時(shí)舀奶，先對Virtual DOM進(jìn)行修改暑竟，再和真實(shí)的DOM進(jìn)行比較，在真實(shí)DOM中只改變需要改變的地方育勺，即只改變局部但荤，不改變整體，因此對系統(tǒng)性能的消耗較小涧至，對Virtual DOM的修改會(huì)在狀態(tài)改變時(shí)觸發(fā)腹躁。二者之間的比較是基于diff算法，若想詳細(xì)了解React算法的南蓬，請查看知乎上的這篇文章纺非。
JSX
什么是JSX哑了？
JSX，全稱Javascript XML烧颖， 是一個(gè)類 XML 的 JavaScript 語法擴(kuò)展弱左，提供了一種在JavaScript中編寫聲明式的XML的方法。JSX是React的核心組成部分,官方推薦使用它炕淮， 當(dāng)然如果你想直接使用純Javascript代碼寫也是可以的拆火，只是使用JSX，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰涂圆∶蔷担可以使用babel在線編譯工具將JSX轉(zhuǎn)化成原生Javascript語言。
下面是一個(gè)簡單的例子：
JSX代碼：
<Hello color="blue">
Hello world
</Hello>
使用babel工具編譯后代碼：
React.createElement(
Hello,
{
color: "blue"
},
"Hello world"
);
組件
組件乘综，即封裝起來的具有獨(dú)立功能的UI部件憎账。React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對獨(dú)立的模塊定義成組件卡辰，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建邪意。
例九妈，通過以下代碼創(chuàng)建一個(gè)簡單的<Hello/>組件：
var Hello = React.createClass({
render: function() {
return <h1>Hello World</h1>;
}
});
ReactDOM.render(
<Hello />,
document.getElementById('example')
);
這里用到了React.createClass方法構(gòu)建了一個(gè)組件對象，用ReactDOM.render方法將創(chuàng)建的組件插入到頁面中雾鬼，有關(guān)這些介紹會(huì)在以后的文章中介紹萌朱。
