一個例子來談react的優勢
點我可以訪問我的個人站點
今天我想談的react的優勢有兩點：
1. 宣告式寫法更符合人性
2. 減少dom操作使效能得以提升
現在我們就寫一個最簡單的計數例子來比較傳統的jquery和react。
jquery方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn_click" type="button" react方式
class App extends Component {
constructor(props){
super(props);
this.onClickButton = this 看懂了上面上個例子，現在我們就開始比較了。
jQuery的工作方式
指令式程式設計，所謂命令式就是你需要告訴計算機一步一步怎麼做。
在jquery的解決方案中，
1. 找到clickCount的按鈕，掛上一個匿名事件處理函式，在事件處理函式彙總，
2. 選中那個需要修改的DOM元素，
3. 讀取其中文字值，
4. 加已修改
5. 然後修改這個DOM元素。
其中只有第4步是用js處理，不用跟DOM打交道的，做前端的都知道在效能優化中，重要的一條就是減少DOM操作。
選中一些DOM元素，然後對這些元素做一些操作，這種模式是一種很容易理解的模式。以至於John Resig一創造出jQuery就被世間普遍認可。但是，對於龐大的專案，程式碼結構複雜，難以維護，效能也跟不上。
React的工作方式
宣告式程式設計，你只需要告訴計算機你需要什麼就行了，不需要關心怎麼去做的。
現在用統一通俗的例子來比較jQuery的命令和React的宣告式。React是一個聰明的建築工人，而jQuery是一個比較傻的建築工人，開發者你是一個建築工程師，如果是jQuery這個建築工人為你工作，你不得不事無鉅細地告訴jQuery“如何去做”，要告訴他這面牆要拆掉重建，那面牆上要新開一個窗戶，反之，如果是React這個建築工人為你工作，你所要做的就是告訴這個工人“我想要什麼樣子”，只需要把圖紙遞給React這個工人，他就會替你搞定一切，當然他不會把整個建築拆掉重建，而是很聰明地把這次的圖紙和上次的圖紙做一個對比，發現不同之處，然後只去做適當的修改就完成任務了。
react的解決方式
在第一構建出DOM樹之後，還會構建出一個Virtual DOM，是對DOM樹的抽象，是一個JavaScript物件，重新渲染的時候，會對比這一次產生的Virtual DOM和上一次渲染的Virtual DOM，對比發現差異之後，只需修改真正的DOM樹時就只需要觸及差別中的部分就行，對於diff演算法比較複雜，後面我也會整理出來和大家分享。
以剛才的例子。其實改變的只有span裡的內容數字，所以react對於其他的DOM元素都不需要觸及，於是執行類似下面的語句，就完成了任務。
document.getElementByID("value").innerHTML = "1";相對於jQuery還要去訪問，操作那麼多次DOM，效能是大大的提高了。
純屬個人愚見，有什麼錯誤的還希望大佬指出來。