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