近期開始的了新的學習(react)，
本人學習有個習慣，
喜歡去探索由來和歷史，
俗稱吃瓜(手動滑稽)
一般網上的視頻教程只會教你怎麼用
react但是並不會告訴你react是當初是怎麼來的，爲了解決哪些痛點。
首先我們先來看一段 js 原生代碼。
這是一段很簡單的代碼，用於操作 result 的增減，
現在，
讓我們來抽象的看待這個問題，
畫個圖來表示：
- 不管你使用原生
js還是jq都要通過dom提供的API，經歷先從頁面取到內容，然後經過js操作以後再填回去。 -
react同學認爲這太智障了，雖然簡單，但是能不能砍掉上面的步驟(從dom取內容)或下面的步驟(填回內容)呢，從而更簡便呢？ - 於是
react同學砍掉了上面的步驟(砍掉下面的步驟不現實，因爲js將無法通知頁面)，直接在js中生成HTML然後自動頁面中同步(用虛線表示)，然後當數據更新時，react將重新生成一個對象，再自動的去更新原來頁面的元素，從而使得頁面中的數據也是最新值。 - 這樣一來事情就變得簡單了，代碼量減少一半，
js再也不用去頁面中取元素，只需再js中生成填回頁面中即可。從來不去取頁面中的元素，只去填東西。react就是在這種理念下誕生了。
接下里我們用這種理念重寫一次上面的代碼。
根據上圖的操作在頁面中加入一個 span
然後爲了加個按鈕（爲了簡化先在頁面中手動增加）
目前代碼有點粗糙，但是爲了簡單明瞭演示上圖的理念。
- 在
js中生成對象插入到頁面中 - 更新數據時，重新在
js中生成對象同步更新原來的頁面元素
接着我們開始優化一下上圖代碼，並把按鈕也放入 js 代碼中：
但是炸一看這代碼還是很傻*，於是我們繼續來 分三步 更層次優化代碼
- 這個
React.creatElement方法名字太長了，抽出 - 這些個變量只用過一次，那我們就可以跳過聲明變量，直接使用
於是代碼就變成了這個樣子：
具有一雙慧眼的你，應該也看的出來這樣的代碼很像一種東西把...
這也就是 react 最聰明的一點優化，
我們驚訝的發現，這樣的 js 代碼和 HTML 標籤上並沒有什麼區別，
於是聰明的 react 同學誕生了另一個想法(JSX)，我們能不能讓用戶寫下面的代碼，然後經過程序轉換成上面的代碼呢？
這樣一來，最終的結果就是我們通過寫下面的代碼來替換（也就是等價於）上面的代碼。
經過 react 同學一番折騰，JSX 語法上線了 （敲黑板，重點：我們並不是在寫HTML代碼，而是用HTML的形式來寫JS代碼）
Finally，代碼變成了這樣子（react 最終的樣子）
本文完。
PS
我們改變過後的類似HTML代碼就是虛擬DOM
還有回答一些弱智問題
爲什麼我們在寫 JSX 的時候，綁定事件的時候函數名後面不帶括號，
因爲在一開始的時候我們在 js 中寫的是對象 {onClick: fn} ，這裏需要的是整個函數，如果寫成 fn()，賦值給 onClick 的就是函數的返回值。