近期開(kāi)始的了新的學(xué)習(xí)(react)育苟，
本人學(xué)習(xí)有個(gè)習(xí)慣，
喜歡去探索由來(lái)和歷史博烂，
俗稱(chēng)吃瓜(手動(dòng)滑稽)
一般網(wǎng)上的視頻教程只會(huì)教你怎么用
react但是并不會(huì)告訴你react是當(dāng)初是怎么來(lái)的漱竖，為了解決哪些痛點(diǎn)。
首先我們先來(lái)看一段 js 原生代碼馍惹。
這是一段很簡(jiǎn)單的代碼，用于操作 result 的增減悼吱，
現(xiàn)在良狈，
讓我們來(lái)抽象的看待這個(gè)問(wèn)題，
畫(huà)個(gè)圖來(lái)表示：
- 不管你使用原生
js還是jq都要通過(guò)dom提供的API吕朵，經(jīng)歷先從頁(yè)面取到內(nèi)容，然后經(jīng)過(guò)js操作以后再填回去努溃。 -
react同學(xué)認(rèn)為這太智障了，雖然簡(jiǎn)單沦疾，但是能不能砍掉上面的步驟(從dom取內(nèi)容)或下面的步驟(填回內(nèi)容)呢第队，從而更簡(jiǎn)便呢？ - 于是
react同學(xué)砍掉了上面的步驟(砍掉下面的步驟不現(xiàn)實(shí)凳谦，因?yàn)閖s將無(wú)法通知頁(yè)面)，直接在js中生成HTML然后自動(dòng)頁(yè)面中同步(用虛線表示)家凯，然后當(dāng)數(shù)據(jù)更新時(shí)如失，react將重新生成一個(gè)對(duì)象，再自動(dòng)的去更新原來(lái)頁(yè)面的元素褪贵，從而使得頁(yè)面中的數(shù)據(jù)也是最新值。 - 這樣一來(lái)事情就變得簡(jiǎn)單了世舰，代碼量減少一半偎快，
js再也不用去頁(yè)面中取元素，只需再js中生成填回頁(yè)面中即可晒夹。從來(lái)不去取頁(yè)面中的元素，只去填東西喷好。react就是在這種理念下誕生了读跷。
接下里我們用這種理念重寫(xiě)一次上面的代碼。
根據(jù)上圖的操作在頁(yè)面中加入一個(gè) span
然后為了加個(gè)按鈕（為了簡(jiǎn)化先在頁(yè)面中手動(dòng)增加）
目前代碼有點(diǎn)粗糙无切，但是為了簡(jiǎn)單明了演示上圖的理念。
- 在
js中生成對(duì)象插入到頁(yè)面中 - 更新數(shù)據(jù)時(shí)掘托，重新在
js中生成對(duì)象同步更新原來(lái)的頁(yè)面元素
接著我們開(kāi)始優(yōu)化一下上圖代碼籍嘹，并把按鈕也放入 js 代碼中：
但是炸一看這代碼還是很傻*，于是我們繼續(xù)來(lái) 分三步 更層次優(yōu)化代碼
- 這個(gè)
React.creatElement方法名字太長(zhǎng)了辱士，抽出 - 這些個(gè)變量只用過(guò)一次，那我們就可以跳過(guò)聲明變量异赫，直接使用
于是代碼就變成了這個(gè)樣子：
具有一雙慧眼的你头岔，應(yīng)該也看的出來(lái)這樣的代碼很像一種東西把...
這也就是 react 最聰明的一點(diǎn)優(yōu)化，
我們驚訝的發(fā)現(xiàn)，這樣的 js 代碼和 HTML 標(biāo)簽上并沒(méi)有什么區(qū)別澎胡，
于是聰明的 react 同學(xué)誕生了另一個(gè)想法(JSX)娩鹉，我們能不能讓用戶寫(xiě)下面的代碼，然后經(jīng)過(guò)程序轉(zhuǎn)換成上面的代碼呢弯予？
這樣一來(lái)，最終的結(jié)果就是我們通過(guò)寫(xiě)下面的代碼來(lái)替換（也就是等價(jià)于）上面的代碼受楼。
經(jīng)過(guò) react 同學(xué)一番折騰呼寸，JSX 語(yǔ)法上線了 （敲黑板，重點(diǎn)：我們并不是在寫(xiě)HTML代碼对雪，而是用HTML的形式來(lái)寫(xiě)JS代碼）
Finally，代碼變成了這樣子（react 最終的樣子）
本文完馋艺。
PS
我們改變過(guò)后的類(lèi)似HTML代碼就是虛擬DOM
還有回答一些弱智問(wèn)題
為什么我們?cè)趯?xiě) JSX 的時(shí)候，綁定事件的時(shí)候函數(shù)名后面不帶括號(hào)捐祠，
因?yàn)樵谝婚_(kāi)始的時(shí)候我們?cè)?js 中寫(xiě)的是對(duì)象 {onClick: fn} ，這里需要的fn是整個(gè)函數(shù)劫笙，如果寫(xiě)成 {onClick: fn()}星岗，賦值給 onClick 的就是函數(shù)的返回值。
