?自從 Vue? 紀(jì)錄片發(fā)布后，國(guó)外粉絲就開(kāi)始瘋狂催更 React? 紀(jì)錄片，雖說(shuō)在國(guó)內(nèi) Vue? 是最流行的框架，但如果放眼全世界的話 React? 才是一哥，所以它的粉絲量也比 Vue 的體量大了很多倍，并且以歐美人居多。

兩年后，React? 紀(jì)錄片終于姍姍來(lái)遲，此片正是出自拍攝 Vue? 紀(jì)錄片的那個(gè)團(tuán)隊(duì)之手。但同一團(tuán)隊(duì)在兩次紀(jì)錄片卻玩起了不同的營(yíng)銷策略，?React? 的紀(jì)錄片有預(yù)售模式，兩個(gè)月前就放出了 ?React? 的預(yù)告片。這個(gè)僅有一分多鐘的預(yù)告片在點(diǎn)贊量上居然和有著半小時(shí)精剪的《Svelte 紀(jì)錄片》幾乎持平：

這足以看出 React 擁有多么龐大的粉絲量，一說(shuō)起粉絲就忍不住想給大家分享一下《Svelte 紀(jì)錄片》底下非常有趣的一條評(píng)論：

其實(shí)別的方向的也有紀(jì)錄片，只不過(guò)都在墻外，國(guó)內(nèi)不怎么關(guān)注罷了。那有人可能會(huì)說(shuō)：React? 紀(jì)錄片不也是在墻外發(fā)布的么？確實(shí)哈！前端用戶量過(guò)于龐大導(dǎo)致關(guān)注度比別的方向都高一些，那么廢話不多說(shuō)，先告訴大家怎么找吧，首先翻墻來(lái)到油管，然后搜索 React Documentary，排在第一位的那個(gè)視頻就是了：

可以看到排在第四位的是 Vue? 紀(jì)錄片，它的總時(shí)長(zhǎng)是 34:45?，而 React? 的時(shí)長(zhǎng)是 1:18:15?，是 Vue 的兩倍多。排在第二的就是兩個(gè)月前的預(yù)告片了，我們先從它開(kāi)始看起：

鏡頭里出現(xiàn)了很多大佬，其中有個(gè)大佬說(shuō)：如果你想要傳播一個(gè)想法，那么你需要真正的說(shuō)服一些人，并讓他們與別人分享你的這個(gè)想法，而不是你自己光在那喊。接下來(lái)另一個(gè)大佬說(shuō)：我覺(jué)得它并不會(huì)成為一個(gè)受歡迎的庫(kù)。

那些大佬我都不太認(rèn)識(shí)，直接貼個(gè)唯一認(rèn)識(shí)的大佬吧：

有人看完可能會(huì)說(shuō)，這不荷蘭弟嗎：

哈哈長(zhǎng)得確實(shí)挺像，不過(guò)他倆可不是同一個(gè)人，這名叫 Dan? 的男子可是不折不扣的 React 大明星，有多大呢？大到其他出鏡的大佬都會(huì)說(shuō)點(diǎn)什么，而他就僅僅只出鏡了這么幾秒鐘并且一句話都沒(méi)說(shuō)，就這樣評(píng)論區(qū)幾乎三分之一的人都在討論他：

給大家機(jī)譯一下：

我確實(shí)聽(tīng)過(guò) Dan 的大名，但沒(méi)想到他在那邊能火到這種程度。出場(chǎng)的大佬有好幾個(gè)，而他居然連一句話都沒(méi)說(shuō)就夠達(dá)到這樣的效果。翻著翻著終于找到和我有一樣疑問(wèn)的人了：

好在最近終于等到了 React? 正式出片，那么接下來(lái)我就來(lái)帶領(lǐng)大家一步步走進(jìn) React 的發(fā)家史。

正片

首先出鏡的是一名有著飄逸秀發(fā)的男子，我不認(rèn)識(shí)他是誰(shuí)哈，感覺(jué)應(yīng)該是本片的主持人，因?yàn)樗f(shuō)話的方式就有點(diǎn)像是主持人：

這里是 React? 播客，今天我們要回到過(guò)去，回到 React? 的開(kāi)始。從十年后的今天來(lái)回顧 React? 的話，我們似乎覺(jué)得 React? 一定會(huì)取得成功。畢竟是 Facebook? 這種大公司出品的框架，不太可能會(huì)失敗。但其實(shí)并不是這樣，甚至在 React? 的歷史上有很多次都讓大家覺(jué)得這款框架根本不可能取得成功。那么到底發(fā)生了什么？這十年來(lái)究竟是怎么發(fā)展的，能讓 React 從半死不活的狀態(tài)到如今的主導(dǎo)地位。

React? 是 Facebook? 在 2011? 年產(chǎn)出的，在那個(gè)年代處于主導(dǎo)地位的是 jQuery? 及 BACKBONE.JS

同時(shí)期的 Ember、Angular? 和 Knockout 也大有趕超之勢(shì)：

那時(shí)候《江南Style》?剛剛被上傳到油管上、《Call Me Maybe》?高居榜首、Freshest Meme? 是 Overly Attach Girlfriend(這是什么意思?)

Overly Attach Girlfriend? 翻譯過(guò)來(lái)就是過(guò)度依賴的女友，這里我沒(méi)太懂是什么意思。于是查了半天資料，感覺(jué)大概是早期的女網(wǎng)紅，這是她的外號(hào)。視頻里瞪大雙眼盯著鏡頭的視頻發(fā)布于 2012-6-7?，獲得了 21,311,159 的播放量（相當(dāng)驚人的數(shù)據(jù)）

《江南Style》?對(duì)于大家來(lái)說(shuō)應(yīng)該很熟悉了，這首歌不僅火遍大江南北，并且在歐美那里也掀起了一陣狂潮。不過(guò)真的很難把 React? 和《江南Style》聯(lián)系到一起去，沒(méi)想到它倆居然是同時(shí)代的產(chǎn)物。

接下來(lái)就是正式內(nèi)容了，來(lái)看看這些大佬們大家都能認(rèn)出來(lái)幾個(gè)：

(動(dòng)態(tài)圖幀數(shù)超過(guò) 300 幀傳不上來(lái) 大佬們太多了 可惜)

第一位出場(chǎng)的大佬是 Pete Hunt：

當(dāng)他得到 Facebook? 的 offer 時(shí)很興奮的告訴了老媽，那時(shí)剛好有部叫《社交網(wǎng)絡(luò)》的電影上映：

老媽聽(tīng)到了以后勸他趕緊入職，因?yàn)楦杏X(jué)扎克伯格那小子挺操蛋的(看過(guò)這部電影的都知道扎克伯格的人品)，別再反悔咯！

由于本片時(shí)間太長(zhǎng)，制作文章的過(guò)程中發(fā)現(xiàn)文章越來(lái)越長(zhǎng)，動(dòng)圖也越來(lái)越多導(dǎo)致整體觀感不佳。所以刪減了部分沒(méi)什么太大意思的片段，只保留了關(guān)鍵部分。如果想看完整版的話建議去油管上搜索 React Documentary，目前只有生肉沒(méi)有熟肉，需要聽(tīng)力十分過(guò)關(guān)才能聽(tīng)懂。

那時(shí)候的 JS? 很不成熟，別說(shuō) ES6? 了，ES5? 都無(wú)法普及呢！所以這位大佬覺(jué)得 JS 只是門玩具語(yǔ)言，產(chǎn)生的一系列框架也都是玩具，不足以支撐他們開(kāi)發(fā)大型復(fù)雜應(yīng)用：

我知道有人可能會(huì)說(shuō)：這些好多應(yīng)該也不算框架吧？頂多就是個(gè)庫(kù)，React? 也是庫(kù)而不是框架。話雖如此，但我可不想每次寫(xiě)的時(shí)候都要寫(xiě)成：框架/庫(kù)?，或者每次都需要刻意區(qū)分一下。片中的大佬也用的是 ?Framework?(框架) 這個(gè)詞，咱就不要因?yàn)檫@個(gè)而杠了，也不是寫(xiě)論文那么嚴(yán)謹(jǐn)，為了觀感體驗(yàn)就統(tǒng)一都稱之為框架好吧！大家能明白意思就行，就不用像文字獄那樣咬文嚼字了。

那時(shí)候 Facebook? 開(kāi)始與蘋(píng)果公司展開(kāi)了激烈的競(jìng)爭(zhēng)，與蘋(píng)果公司理念不同的是 Facebook? 認(rèn)為成功的關(guān)鍵在于 Web?。如果能成功推動(dòng) H5? 的發(fā)展那當(dāng)然再好不過(guò)了，所以他們開(kāi)發(fā)了一款名為 Bolt.js 的框架：

之所以叫這個(gè)名字是希望能像閃電和螺栓那樣把各個(gè)框架的優(yōu)點(diǎn)集合到一起：

之所以叫這個(gè)名字是希望能像閃電和螺栓那樣把各個(gè)框架的優(yōu)點(diǎn)集合到一起：

聽(tīng)完這一說(shuō)法后的我：

你們想把各大框架的優(yōu)點(diǎn)集合到一起的這個(gè)想法是好的，但和閃電螺栓有啥關(guān)系？用螺栓把各大框架釘上？他們覺(jué)得 Bolt 比當(dāng)時(shí)市面上的其他幾款框架都要好：

看起來(lái)寫(xiě)法有點(diǎn)像是 React 0.15? 的寫(xiě)法，因?yàn)樵缙诘?nbsp;React? 正是 Bolt? 那幫人寫(xiě)的。而且我才知到的一個(gè)很有趣的冷知識(shí)：React? 一開(kāi)始叫 FBolt?，大家一看這名字可能會(huì)問(wèn) F? 是啥意思？Facebook Bolt?？其實(shí)這個(gè) F? 代表的是 Functional?(函數(shù)式)，而 React 的中心區(qū)域正是一顆螺栓的形狀：

他們覺(jué)得當(dāng)時(shí)前端最難的部分是需要先找到變動(dòng)的 DOM 節(jié)點(diǎn)，來(lái)看一眼這張圖：

大家能聯(lián)想到什么？雖然 jQuery? 在性能上有優(yōu)勢(shì)，但在過(guò)程中就像上面那張動(dòng)圖一樣不知走了多少?gòu)澛?。而?duì)于 React? 而言雖然性能不如 jQuery?，但在過(guò)程中簡(jiǎn)直完勝?。eact? 不用像 jQuery? 那樣手動(dòng)的、人工的找到需要變動(dòng)的 DOM? 節(jié)點(diǎn)，填充一遍數(shù)據(jù)后再把 DOM? 塞回去。這么做簡(jiǎn)直太智障了，而這也正是大部分的 ?bug? 來(lái)源。工程師們把大量的精力都投入到了操作 ?DOM?上，稍有不慎就會(huì)出現(xiàn)匪夷所思的 ?bug?，而且還特別難以排查。

Facebook 團(tuán)隊(duì)里有個(gè)叫陳靜(音譯)的華裔：

大名鼎鼎的 Flux 架構(gòu)就是她提出的 ：

并且在 React 的早期階段她起到了至關(guān)重要的作用：

當(dāng)時(shí)在 Facebook? 內(nèi)部有仨框架，他們分別是 Bolt、JS HTML? 以及 React：

隨著時(shí)間的推移，慢慢的只留下來(lái)了 Blot? 和 React，這是兩款在寫(xiě)法上非常相似的框架：

雖然寫(xiě)法相似但運(yùn)行原理卻大不相同，而且維護(hù)兩個(gè)框架無(wú)論是從人力資源上還是從使用者的角度都不是最優(yōu)解。最優(yōu)解就是干掉其中一個(gè)框架，主推另一個(gè)框架。那么被干掉的是誰(shuí)呢？從今天 React? 的地位來(lái)看被干掉的無(wú)疑是另一款框架了，因?yàn)檫@事還鬧出了諸多不快。因?yàn)閷?duì) React? 而言用它做出來(lái)的成功案例并不多，不像 Bolt? 已經(jīng)久經(jīng)考驗(yàn)了（因?yàn)镽eact?是后出的）但從另一方面來(lái)講 Bolt? 又沒(méi)有 React? 靈活、沒(méi)它先進(jìn)。而且如果是你的話，你在公司里已經(jīng)用 Bolt? 開(kāi)發(fā)了很多項(xiàng)目了，突然有人說(shuō)要干掉 Bolt，你會(huì)愿意嗎？

與 Vue? 紀(jì)錄片以及 Svelte? 紀(jì)錄片有很大的不同就是這個(gè)紀(jì)錄片有很多篇幅都是在講這些扯皮事，畢竟 Vue、Svelte 這些框架剛開(kāi)始時(shí)都是由個(gè)人來(lái)進(jìn)行主導(dǎo)創(chuàng)作的。即使在今天，那些框架里百分之八九十的代碼也都是由原創(chuàng)者來(lái)進(jìn)行貢獻(xiàn)的，就能少很多這樣的拉扯。看完前半段真的是有點(diǎn)無(wú)聊，壓根就沒(méi)講多少技術(shù)方面的，凈講怎么博弈了：這個(gè)怎么說(shuō)服那個(gè)、那個(gè)又怎么質(zhì)疑這個(gè)、最終經(jīng)過(guò)了多少重重險(xiǎn)阻才能夠達(dá)成一致… 不過(guò)這也確確實(shí)實(shí)是在大公司里做開(kāi)源的真實(shí)歷程，那我們繼續(xù)往下看吧，希望后面的內(nèi)容能更精彩一些。

開(kāi)源

最終他們說(shuō)服了這個(gè)說(shuō)服了那個(gè)（凈是些扯皮的事）決定開(kāi)源，他們決定扭轉(zhuǎn) Facebook? 的開(kāi)源形象，因?yàn)橐酝?nbsp;Facebook? 開(kāi)源項(xiàng)目通常都是爛尾的，先開(kāi)源出去給大家畫(huà)個(gè)大餅，完了升 P? 了就沒(méi)人維護(hù)了，開(kāi)始下一個(gè) KPI 項(xiàng)目。這個(gè)劇本是不是挺熟悉的，這不阿里么？

然后他們開(kāi)始選擇在哪來(lái)進(jìn)行開(kāi)源，看到這的時(shí)候我還一愣，除了在 

GitHub? 上還能在哪開(kāi)源？看到后面我才明白過(guò)來(lái)，他們說(shuō)的在哪開(kāi)源指的是在哪進(jìn)行首發(fā)宣傳，最終他們選擇了 JSConf：

他們說(shuō) JSConf? 有點(diǎn)像是 JavaScript 屆的奧斯卡，視頻里這個(gè)小金人特效讓我想起了某爾街之狼：

這是部偉大的影片，建議拉上全家一起觀看：

那是佛羅里達(dá)的一個(gè)早上，他們乘坐巴士來(lái)到了辦公室，都9點(diǎn)多了辦公室居然空無(wú)一人，萬(wàn)惡的資本主義上班那么晚下班那么早，不利于大家?jiàn)^斗。哪像我們的狼性文化：比待遇越比心胸越窄，講奉獻(xiàn)越講境界越高：

狗頭都快不夠用了，他們那么早(9點(diǎn))來(lái)辦公室準(zhǔn)備干嘛呢？準(zhǔn)備配合他們正在演講的同事按下按鈕迎接開(kāi)源：

記住下面這位名叫喬丹的大佬，他才是 React 的真正創(chuàng)造者。前面的視頻各位大佬一直都在提這個(gè)叫做喬丹的男人，但奇怪的是我從未見(jiàn)過(guò)他在視頻中露面，這是他第一次在這個(gè)紀(jì)錄片出鏡：

準(zhǔn)確的說(shuō)應(yīng)該也不算是在紀(jì)錄片中出鏡，因?yàn)檫@一看就是從以前的視頻錄像里截的，不知為何到現(xiàn)在也沒(méi)能見(jiàn)到這位大佬?？傊蠹覍?duì)這個(gè)叫 React? 的框架持懷疑態(tài)度，對(duì) JSX 語(yǔ)法更是反感。這也很正常，任何新事物出現(xiàn)的時(shí)候大家都會(huì)持懷疑態(tài)度，唯有時(shí)間能夠證明一切。來(lái)看看當(dāng)時(shí)在推特上大家都是咋說(shuō)的吧：

什么!？#react?!？在 JS? 里寫(xiě) XML?，這也太蠢了吧！這簡(jiǎn)直是個(gè)爛到不能再爛的創(chuàng)新！@#JSConf

所以… "JSX" emmmmmm…

React 這不是違背了關(guān)注點(diǎn)分離了么？

React 出師不利?。?/p>

這太糟糕了，確定不是從 PHP 那里學(xué)的？

哦我的上帝?。SX?… 為什么？究竟為什么?? 不要再搞 JS 方言了！

看到大家的反應(yīng)，大佬們很失望。因?yàn)樗麄兓撕脦讉€(gè)晚上和周末來(lái)把這個(gè)內(nèi)部項(xiàng)目改造的更適合開(kāi)源，但沒(méi)想到卻引來(lái)了一片罵聲，太讓人羞愧了！

雖然這段代碼看起來(lái)像是寫(xiě)了一段 DOM，但實(shí)際上并不是，接下來(lái)大家就會(huì)明白這是什么。

但其實(shí)大家都沒(méi)怎么聽(tīng)他們接下來(lái)說(shuō)的為何 JSX? 對(duì)我們有很大的幫助以及設(shè)計(jì)理念是什么就開(kāi)噴了，而且他們根本搞不明白到底是為啥？大家為何如此反感 JSX?？一直揪著在 JS? 里寫(xiě) XML? 這點(diǎn)不放，在 Facebook? 里用的時(shí)候大家都說(shuō)好，怎么一開(kāi)源就變成這副德行了… 他們后來(lái)也進(jìn)行了反思：他們沒(méi)有真正的理解前端的世界有多大，沒(méi)有預(yù)料到 Facebook? 之外的前端開(kāi)發(fā)與 Facebook 的工程師思維之間能有多大的差異。不過(guò)他們并不怪大家，也不認(rèn)為那些發(fā)推特狂噴的人是瘋子，他們覺(jué)得也許大家說(shuō)的是對(duì)的，他們自己才是真正的瘋子。

這讓我想起了一句至理名言：

真正的天才在成功之前往往都會(huì)被大家認(rèn)為是瘋子。

                            ——— 沃·滋基碩德(我·自己說(shuō)的)

這件事對(duì) Raect? 團(tuán)隊(duì)產(chǎn)生了很大的打擊：有的人失去了信心、有的人很生氣：他們甚至都沒(méi)用一下 React? 就噴、都沒(méi)有花時(shí)間去思考一下 React? 的理念、還有人開(kāi)始進(jìn)行了反思：在 Facebook? 他們是一個(gè)規(guī)模較小的團(tuán)隊(duì)，當(dāng)團(tuán)隊(duì)中有質(zhì)疑或是不理解的聲音出現(xiàn)時(shí)，他們可以把大家拉到一個(gè)小會(huì)議室里去面談，當(dāng)眾去用自己的觀念來(lái)說(shuō)服大家。同時(shí)也會(huì)為大家答疑解惑，消除大家的疑慮。但很顯然他們不可能把全世界所有質(zhì)疑的聲音都叫到 Facebook? 來(lái)開(kāi)會(huì)，也不太可能在每條評(píng)論下面挨個(gè)的去反駁，這樣顯得 React 團(tuán)隊(duì)跟個(gè)杠精團(tuán)隊(duì)一樣，很可能會(huì)取得適得其反的反作用。

當(dāng)時(shí)比較流行的觀念是關(guān)注點(diǎn)分離原則，就是說(shuō)你不應(yīng)該把 HTML、CSS、JavaScript 寫(xiě)在一起，應(yīng)該把它們仨分離開(kāi)來(lái)：

這就是當(dāng)年的最佳實(shí)踐，React? 的理念恰好和當(dāng)時(shí)的最佳實(shí)踐背道而馳，這理所當(dāng)然的會(huì)令大家感到不爽。那么大家有沒(méi)有想過(guò)為什么明明違背了關(guān)注點(diǎn)分離原則，但 React? 卻還是能夠一路高歌猛進(jìn)沖向神壇。這是因?yàn)殡m然 React? 違背了當(dāng)時(shí)的關(guān)注點(diǎn)分離原則，但卻創(chuàng)造了另一種更為先進(jìn)的關(guān)注點(diǎn)分離原則。想想看是不是這么一回事，在那個(gè)年代并沒(méi)有組件化的概念，所以關(guān)注點(diǎn)分離指的就是 HTML、CSS、JS 三權(quán)分立。雖說(shuō)這樣做在一定程度上確實(shí)提高了可維護(hù)性，但為什么不能根據(jù)功能、根據(jù)組件來(lái)進(jìn)行分離呢：

所以說(shuō)并不是歷史在開(kāi)倒車，大家只注意到了違背 HTML、CSS、JS? 的關(guān)注點(diǎn)分離原則，但卻沒(méi)有注意到 React 開(kāi)創(chuàng)了以組件為單位的新關(guān)注點(diǎn)分離原則。然后就出現(xiàn)了菜雞們質(zhì)疑大佬們的一幕：

他們覺(jué)得 Facebook? 的工程師都是傻X?不會(huì)寫(xiě)代碼，想了一些明顯違背了最佳實(shí)踐的主意就敢對(duì)外進(jìn)行宣傳。這些言論讓 React? 團(tuán)隊(duì)感覺(jué)這款框架在 Facebook? 以外的世界不會(huì)有任何前途，然而令他們感到意外的是：第一個(gè)用 React? 的程序員(非Facebook?員工)在用了一段時(shí)間后覺(jué)得這玩意非常棒！并在互聯(lián)網(wǎng)上幫 React 說(shuō)了很多好話。我們一起來(lái)看一下她的經(jīng)歷吧：

她當(dāng)時(shí)正在開(kāi)發(fā)一款比較復(fù)雜的數(shù)學(xué)編輯器，用的是 backbone.js?，但隨著應(yīng)用越來(lái)越復(fù)雜，狀態(tài)管理也變得越來(lái)越難。正在這時(shí)她發(fā)現(xiàn)了 React?，感覺(jué)這玩意能夠解決很多她所遇到的問(wèn)題，事實(shí)也確實(shí)如她所料，就這樣她成為了 React? 的第一個(gè)粉絲。在使用了一周后她寫(xiě)了一篇類似于觀后感一樣的帖子，在帖子里她說(shuō)自己剛剛用 React? 重寫(xiě)了 2000? 行代碼的一個(gè)應(yīng)用，并且還給 ?React? 提了 ?PR?。到目前為止她所看到的 ?React? 相關(guān)的一切似乎都是經(jīng)過(guò)了深思熟慮后的設(shè)計(jì)，她很榮幸能夠成為 React? 的第一個(gè)非 Facebook 用戶：

在評(píng)論區(qū)有人問(wèn)她：React 跟其他流行框架比起來(lái)怎么樣？

她對(duì) React 做出了非常高的評(píng)價(jià)：

我最喜歡 React? 的一點(diǎn)就是它特別易于理解，舉個(gè)例子：如果你在 Angular? 的文檔里去看《如何編寫(xiě)一個(gè)指令》這一章節(jié)時(shí)(在當(dāng)年的 Angular? 里，一個(gè)自定義指令就相當(dāng)于一個(gè)可復(fù)用的組件了)，它需要先解釋一遍指令的優(yōu)先級(jí)、指令的編譯和連接之間有何不同、如何創(chuàng)建一個(gè)新作用域等… 這些東西全都是 Angular? 特有的發(fā)明創(chuàng)造。但在 React? 里你只需要理解 JSX? 語(yǔ)法，剩下別的全都是 JavaScript?，你的 JS? 技能在這里能夠得到完美的發(fā)揮，我認(rèn)為 React 比其他框架都要好。

愛(ài) React?！并且我現(xiàn)在正在勸我同事們跟我一起用 React??

不過(guò)隨著時(shí)間的推移，她發(fā)現(xiàn) React? 在某些情況下并不像她自己預(yù)期的那樣運(yùn)行，有一些小 bug?。因?yàn)槟菚r(shí)候 React? 的用戶很少，幾乎就只有 Facebook? 的員工在用，所以有些 bug?他們暫時(shí)發(fā)現(xiàn)不了。有人可能會(huì)問(wèn)為什么發(fā)現(xiàn)不了？難道是 Facebook? 的產(chǎn)品線不夠多？應(yīng)用不夠復(fù)雜？這么說(shuō)吧！大廠都是有一套代碼標(biāo)準(zhǔn)的，在大廠工作過(guò)的同學(xué)應(yīng)該知道入職后首先會(huì)先讓你通讀代碼準(zhǔn)則，從而限制住你的個(gè)人發(fā)揮。Review? 的時(shí)候組長(zhǎng)看到一些不太容易理解的騷操作后通常也會(huì)讓你改寫(xiě)成普通寫(xiě)法，不讓你寫(xiě)的太騷，太騷的話除了讓別人看不懂之外，還有可能寫(xiě)出一些難以排查的 bug?。但用 React? 的不一定非得是大廠員工吧？自由是一把雙刃劍，在高手的手中能發(fā)揮出巨大的威力，但在憨憨的手中就容易寫(xiě)出：臥槽！還能這樣？的代碼。當(dāng)然不是說(shuō)這位女主是憨憨哈，只是說(shuō)過(guò)于自由的寫(xiě)法在某些邊界情況下容易出 bug?，因?yàn)?nbsp;React 團(tuán)隊(duì)從來(lái)就沒(méi)想過(guò)：臥槽！怎么還能寫(xiě)成這樣？

于是乎她加進(jìn)了 React? 的聊天群，React? 的核心維護(hù)者們都在這個(gè)群里，大家看到有妹子加進(jìn)來(lái)之后都很興奮：

各位大佬們事無(wú)巨細(xì)的指導(dǎo)著妹子，妹子也很快就理解了 React?，從而幫助更多的人，為 React?做出屬于自己的一份貢獻(xiàn)：

他們認(rèn)為這名來(lái)自 Facebook? 之外的用戶對(duì) React? 起到了很重要的推進(jìn)作用，因?yàn)樵诤芏鄨?chǎng)合她都在夸 React? 有多好。如果是 Facebook? 自己人夸 React 的話，那就有種王婆賣瓜自賣自夸的感覺(jué)，就像是每次去買水果時(shí)總會(huì)聽(tīng)到有人會(huì)問(wèn)：老板你家瓜甜么？在我眼里看來(lái)這就是句廢話，因?yàn)槲覐膩?lái)沒(méi)見(jiàn)過(guò)哪家水果店的老板在遇見(jiàn)這種問(wèn)題時(shí)會(huì)說(shuō)自己家的瓜不甜的：

后來(lái)她慢慢成為了 React 的核心團(tuán)隊(duì)成員：

他們每周五都會(huì)有一個(gè) React? 討論會(huì)，每次都會(huì)邀請(qǐng)她一起，所以她每周五的下午都會(huì)專門請(qǐng)半天假來(lái)到 Facebook? 總部與各位 React? 大佬們一起探討 React?。正是她的出現(xiàn)為 React? 團(tuán)隊(duì)帶來(lái)了信心，他們決定開(kāi)始寫(xiě)文章來(lái)講解 React? 知識(shí)點(diǎn)，或者每次都和單獨(dú)的一個(gè)人進(jìn)行對(duì)線，以改變這個(gè)人對(duì) React? 的看法。有人可能會(huì)說(shuō)每次都改變一個(gè)人的觀點(diǎn)這得改變到啥時(shí)候去呀？大家不要小瞧了一個(gè)人的力量，這個(gè)人很有可能會(huì)在無(wú)形中造成一傳十、十傳百的裂變效應(yīng)。可以拿Vue3? 來(lái)舉例：Vue3? 在剛出的時(shí)候也是有特別多的人都在質(zhì)疑，如果你還在猶豫要不要上 Vue3但你看到的評(píng)論都是：

那我為什么不用 React？

這是抄襲的 React 吧？

這樣豈不是會(huì)寫(xiě)出意大利面條般的代碼？

看起來(lái)沒(méi)有 Vue2 簡(jiǎn)潔了…

看完后很可能就會(huì)放棄上 Vue3 的念頭了，但如果有人用了并且還覺(jué)得不錯(cuò)，哪怕只有一個(gè)人說(shuō)：

已經(jīng)用 Vue3 重構(gòu)了，真香！

也說(shuō)不定就會(huì)改變很多人的想法，這條評(píng)論下很可能會(huì)多出來(lái)好幾條評(píng)論都在問(wèn)：感覺(jué)怎么樣？有沒(méi)有 bug? 之類的評(píng)論。如果得到的都是一些很積極的回復(fù)，那么很可能就會(huì)帶動(dòng)另一批還在猶豫中的人，那些人在用了之后又會(huì)把積極的信號(hào)傳遞給其他人，就這樣 Vue3 已經(jīng)不再是當(dāng)初那種質(zhì)疑聲非常多的狀態(tài)了，取而代之的是目前比較積極的狀態(tài)。

React? 也是同理，他們后來(lái)在 JSConf? 歐洲站的時(shí)候不再說(shuō)我們這個(gè)框架有多么多么好、你們應(yīng)該趕緊來(lái)試試，這樣反而會(huì)引起別人的逆反心理。取而代之的是說(shuō)這個(gè)框架很有意思，怎么個(gè)有意思法呢：為什么能在 JS? 里寫(xiě) XML 代碼、這最終都會(huì)生成些什么、我們?cè)陂_(kāi)發(fā)時(shí)都遇到了哪些問(wèn)題… 這樣一下子就引起了大家的共鳴，并開(kāi)始能在推特上看到一些正面的回復(fù)了。

再后來(lái)他們吸引到了來(lái)自函數(shù)式編程世界的大佬，函數(shù)式大佬自然很喜歡函數(shù)式的框架，于是免費(fèi)幫他們帶貨宣傳，寫(xiě)了一篇名為《JavaScript MVC 框架的未來(lái)》：

在文章中他用數(shù)據(jù)可視化的形式證明了 React? 性能在 Backbone 之上：

這在很大程度上消除了人們對(duì) React? 虛擬 DOM? 性能的擔(dān)憂，從那以后好多人的態(tài)度從：我永遠(yuǎn)都不會(huì)用這個(gè)叫 React 的框架轉(zhuǎn)變?yōu)椋河悬c(diǎn)意思，我準(zhǔn)備試一下，我沒(méi)說(shuō)準(zhǔn)備用它我只是覺(jué)得可以先試一下。

正是這種態(tài)度的轉(zhuǎn)變導(dǎo)致了接下來(lái)的兩年時(shí)間 React? 的周邊庫(kù)呈爆發(fā)式增長(zhǎng)，出現(xiàn)了一大堆狀態(tài)管理庫(kù)、一大堆路由庫(kù)還有一大堆服務(wù)端渲染策略等… 同時(shí) React? 的用戶量也隨之水漲船高：

有很多大公司都開(kāi)始相繼用上了 React?，比方說(shuō)雅虎、奈飛等… 那時(shí)候奈飛的網(wǎng)站是用 Java Web? 來(lái)進(jìn)行構(gòu)建的，構(gòu)建速度非常慢，一次就要十五分鐘左右，所以他們準(zhǔn)備找一個(gè)更現(xiàn)代化一點(diǎn)的解決方案。那時(shí)候他們已經(jīng)注意到了 React? 但還是有點(diǎn)擔(dān)心，因?yàn)?nbsp;React? 還是有點(diǎn)新，他們希望構(gòu)建出來(lái)的網(wǎng)站架構(gòu)能在接下來(lái)的十年內(nèi)都不要有什么大的變動(dòng)。如果說(shuō) React? 過(guò)兩年?duì)€尾了或者被淘汰了那他們還得再次重構(gòu)，所以他們出了兩撥人，分別給了他們一個(gè)月功夫讓他們來(lái)構(gòu)建個(gè)應(yīng)用。一隊(duì)用 React? 另一隊(duì)用 Backbone?，一個(gè)月后勝出的毫無(wú)疑問(wèn)是 React?。于是他們公開(kāi)稱贊了 React?，這無(wú)疑讓 React 的形象更加高大上了起來(lái)：

后來(lái)推特上越來(lái)越多的人提議讓 React? 舉辦場(chǎng)會(huì)吧！于是他們準(zhǔn)備舉辦，沒(méi)想到僅用半分鐘門票就被搶購(gòu)一空，網(wǎng)站都崩了。他們當(dāng)時(shí)還沒(méi)意識(shí)到 React? 到底已經(jīng)發(fā)展到了什么程度：

看到 React 已經(jīng)有這么多粉絲了真的給他們樂(lè)的不行，開(kāi)心到嘴都合不上了：

在會(huì)上他們還宣布了許多其他的重磅項(xiàng)目，其中就包括了 React Native：

話說(shuō)他們公司這個(gè)小單間還挺有意思的：

重磅人物

真正重磅的人物往往都是最后一個(gè)出場(chǎng)的：

他就是大名鼎鼎的 Dan?，雖說(shuō)聽(tīng)過(guò)他的大名，但我對(duì)他的了解僅限于他是 Redux? 及 React DnD? 的締造者、俄羅斯人、后被招至 Facebook? 倫敦分部參與 React 的維護(hù)及其他產(chǎn)品的開(kāi)發(fā)、年薪大概十幾萬(wàn)美金…

雖說(shuō)履歷非常優(yōu)秀但我還是不太明白他為什么能比別人都火，畢竟別人也不是吃素的??！在座的哪位不都是萬(wàn)里挑一的大佬，那么接下來(lái)我們就來(lái)看一下這個(gè)叫蛋的男人究竟有何過(guò)人之處：

主持人說(shuō)他很 shy?，從他的行為舉止來(lái)看確實(shí)是有些靦腆，可惜這里貼不了視頻你們只能看動(dòng)圖。因?yàn)槿绻?tīng)他講話的聲音甚至?xí)杏X(jué)有點(diǎn)“娘”。很難想象這是一名以“戰(zhàn)斗民族”所著稱的俄羅斯人，Dan 成功的扭轉(zhuǎn)了俄羅斯人在我心目中的強(qiáng)悍形象，他說(shuō)：

首先聲明一點(diǎn)：React? 不是我創(chuàng)造的，而是由喬丹·沃克(Jordan Walke)創(chuàng)造的

這讓我對(duì)眼前這個(gè)瘦瘦的小伙子感到更加的好奇，他肯定是有什么過(guò)人之處所以才會(huì)讓不少人覺(jué)得 React 是他寫(xiě)出來(lái)的。當(dāng)年他在一家小型初創(chuàng)公司任職，職責(zé)是創(chuàng)建一種有著復(fù)雜交互效果的數(shù)字發(fā)布平臺(tái)：

一開(kāi)始用的是 Backbone?，后來(lái)開(kāi)始用 React?，因?yàn)樗杏X(jué) React? 更能解決他們所需到的一些問(wèn)題。他寫(xiě)的第一個(gè) React? 組件是一個(gè)點(diǎn)贊按鈕，不要小瞧了一個(gè)小小的點(diǎn)贊按鈕，因?yàn)樵邳c(diǎn)贊之后還有很多種狀態(tài)：你喜歡這個(gè)視頻、你和你的好友Xxx?喜歡這個(gè)視頻、你和其他40名用戶喜歡這個(gè)視頻…

在別的框架里寫(xiě)這些東西很麻煩，需要手動(dòng)監(jiān)聽(tīng)變化然后再進(jìn)行更新。但在 React 里寫(xiě)法非常自然：

// 偽代碼
import React from 'react'

export function Like (props) {
  if (nobodyLike) {
    return <.../>
  } else if (onlyYouLike) {
    return <.../>
  } else if (...) {
    return <.../>
  } else {
    return <.../>
  }
}

于是他們用 React? 重寫(xiě)了整個(gè)應(yīng)用程序，并且在此期間還在一直發(fā)布新功能。React? 大大加快了他們的開(kāi)發(fā)速度，讓他們能在重構(gòu)舊功能的同時(shí)還能再發(fā)布新功能。這就是為何 Dan? 有點(diǎn)愛(ài)上了 React 的原因：

但當(dāng)時(shí) React? 的生態(tài)比較荒蕪，啥玩意都需要自己寫(xiě)。他敏銳的察覺(jué)到了一個(gè)巨大的機(jī)會(huì)，于是他的第一個(gè)與 React? 相關(guān)的開(kāi)源項(xiàng)目誕生了：

現(xiàn)在看來(lái)熱更新是再普遍不過(guò)的功能了，但在當(dāng)時(shí)這玩意能大幅提升開(kāi)發(fā)體驗(yàn)，他還專門錄制了視頻來(lái)演示，這讓他一炮而紅。并且在 React Conf 上也大力夸贊了他的大名以及他的項(xiàng)目

后來(lái)他想加點(diǎn)更有意思的東西進(jìn)來(lái)，于是他瞄向了一位名為維克多的大佬所演講的時(shí)光旅行：

注意看超級(jí)瑪麗上方的那個(gè)時(shí)間軸，如果我們能讓我們的程序擁有控制時(shí)間軸的能力，那豈不就像是在看一段有時(shí)間軸的視頻么。我們做過(guò)什么操作都可以通過(guò)拉動(dòng)進(jìn)度條來(lái)進(jìn)行還原，這就是大名鼎鼎的 Redux：

后來(lái)他去見(jiàn)了陳靜(音譯)，還記得前面說(shuō)過(guò)的 Flux? 架構(gòu)吧？Redux? 是 Flux? 的實(shí)踐者，她說(shuō) Facebook? 現(xiàn)在正在倫敦招人呢，想來(lái)不？想來(lái)的話找姐??！姐姐幫你內(nèi)推！于是 Dan? 就這么進(jìn)入了 Facebook，所以說(shuō)你光有技術(shù)還不夠，你還得有人！

尾聲

到了這一步就開(kāi)始感謝各位開(kāi)發(fā)者了，請(qǐng)記住他/她們的面孔，正是ta?們?cè)诒澈蟮母冻霾庞辛巳缃竦?nbsp;React：

鏡頭回到主持人這里：

Misko Hevery 說(shuō)過(guò)：一個(gè)很棒的解決方案很少是由大型組織所締造的，通常都是由一個(gè)充滿激情和遠(yuǎn)見(jiàn)的人慢慢開(kāi)始感染其它人。

這是對(duì) React? 的一個(gè)很好的總結(jié)，視頻前面的幾位大佬經(jīng)常說(shuō)到那個(gè)叫喬丹的男人非常興奮的找到他們說(shuō)自己想出來(lái)了一個(gè)超級(jí) cool? 的 idea?，然后嘰里哇啦的給他們講了一大堆理念把各位大佬們都講懵了。直到后來(lái)大家慢慢接受了他的理念并一起完善它、再到干掉內(nèi)部的其他競(jìng)爭(zhēng)對(duì)手框架、再到開(kāi)源、再到說(shuō)服 Facebook 以外的人接受它。

影片的最后他們還做了段炫酷動(dòng)畫(huà)，我們一起來(lái)欣賞下：

視頻結(jié)束后出現(xiàn)了一位笑容非常甜美的小姐姐：

眼熟不？想不起來(lái)的話我來(lái)提個(gè)醒：在 Vue 紀(jì)錄片最后也有這么一段，畢竟是出自同一團(tuán)隊(duì)之手。

意猶未盡不？意猶未盡的話咱就再看看評(píng)論區(qū)里都說(shuō)了些啥吧：

老規(guī)矩，機(jī)譯下：

總結(jié)

沒(méi)想到 React? 剛開(kāi)始推出的時(shí)候會(huì)遇到這么大的阻力，更沒(méi)想到 JSX? 在當(dāng)時(shí)那么不被大眾所接納。不過(guò)感覺(jué)說(shuō)的確實(shí)有道理：大家只看到了違背 HTML、CSS、JS? 的關(guān)注點(diǎn)分離原則，但卻沒(méi)看到 JSX? 所創(chuàng)造的新關(guān)注點(diǎn)分離原則。這也是為什么像 Vue? 這種把 HTML?、?CSS?、?JS? 全都寫(xiě)在一起的行為明明看起來(lái)就是在開(kāi)歷史的倒車，但用起來(lái)卻比以往符合關(guān)注點(diǎn)分離原則的那些方案更加舒適的原因所在。新時(shí)代的關(guān)注點(diǎn)分離原則的關(guān)注點(diǎn)在于組件，而不在于 HTML、CSS? 和 JS，更沒(méi)有必要強(qiáng)行把原本不需要分離的內(nèi)容分離出去，除非是一個(gè)過(guò)于龐大的組件才應(yīng)該想著該怎么去拆分成更細(xì)粒度的組件。

各位如果看完本文意還猶未盡的話可以再看看這篇：

《看完 Svelte 紀(jì)錄片才知道它為什么在國(guó)外比國(guó)內(nèi)火》

Svelte? 的故事同樣也很精彩，并且沒(méi)有他們這種大公司那么多的扯皮事。其實(shí) Svelte? 的語(yǔ)法更加激進(jìn)，但卻沒(méi)有遇到像 React 剛開(kāi)始時(shí)的那種艱難險(xiǎn)阻。這讓我想起了一句絕世名言：

當(dāng)你能夠輕松進(jìn)入的時(shí)候，不是因?yàn)槟阌卸鄥柡?，而是因?yàn)橛星拜厼槟阃貙捔说缆??！?沃·葉布智道誰(shuí)碩德(我·也不知道誰(shuí)說(shuō)的)

感謝 JSX? 為所有把 JS? 和 HTML 寫(xiě)在一起的各大框架們拓寬了道路！