前言
自从 Vue 纪录片发布后，国外粉丝就开始疯狂催更 React 纪录片，虽说在国内 Vue 是最流行的框架，但如果放眼全世界的话 React 才是一哥，所以它的粉丝量也比 Vue 的体量大了很多倍，并且以欧美人居多。
两年后，React 纪录片终于姗姗来迟，此片正是出自拍摄 Vue 纪录片的那个团队之手。但同一团队在两次纪录片却玩起了不同的营销策略，React 的纪录片有预售模式，两个月前就放出了 React 的预告片。这个仅有一分多钟的预告片在点赞量上居然和有着半小时精剪的《Svelte 纪录片》几乎持平：
这足以看出 React 拥有多么庞大的粉丝量，一说起粉丝就忍不住想给大家分享一下《Svelte 纪录片》底下非常有趣的一条评论：
其实别的方向的也有纪录片，只不过都在墙外，国内不怎么关注罢了。那有人可能会说：React 纪录片不也是在墙外发布的么？确实哈！前端用户量过于庞大导致关注度比别的方向都高一些，那么废话不多说，先把纪录片地址贴上来：
(地址贴上来导致审核不通过)
那就告诉大家怎么找吧（只能这样了）首先翻墙来到油管(文章中不能出现那个单词，只好用油管这个词代替，不懂的可以去搜一下是啥意思)，然后搜索 React Documentary，排在第一位的那个视频就是了：
可以看到排在第四位的是 Vue 纪录片，它的总时长是 34:45，而 React 的时长是 1:18:15，是 Vue 的两倍多。排在第二的就是两个月前的预告片了，我们先从它开始看起：
镜头里出现了很多大佬，其中有个大佬说：如果你想要传播一个想法，那么你需要真正的说服一些人，并让他们与别人分享你的这个想法，而不是你自己光在那喊。接下来另一个大佬说：我觉得它并不会成为一个受欢迎的库。
那些大佬我都不太认识，直接贴个唯一认识的大佬吧：
有人看完可能会说，这不荷兰弟吗：
哈哈长得确实挺像，不过他俩可不是同一个人，这名叫 Dan 的男子可是不折不扣的 React 大明星，有多大呢？大到其他出境的大佬都会说点什么，而他就仅仅只出镜了这么几秒钟并且一句话都没说，就这样评论区几乎三分之一的人都在讨论他：
给大家机译一下：
我确实听过 Dan 的大名，但没想到他在那边能火到这种程度。出场的大佬有好几个，而他居然连一句话都没说就够达到这样的效果。翻着翻着终于找到和我有一样疑问的人了：
好在最近终于等到了 React 正式出片，那么接下来我就来带领大家一步步走进 React 的发家史。
正式片
首先出镜的是一名有着飘逸秀发的男子，我不认识他是谁哈，感觉应该是本片的主持人，因为他说话的方式就有点像是主持人：
这里是
React播客，今天我们要回到过去，回到React的开始。从十年后的今天来回顾React的话，我们似乎觉得React一定会取得成功。毕竟是React的历史上有很多次都让大家觉得这款框架根本不可能取得成功。 那么到底发生了什么？这十年来究竟是怎么发展的，能让React从半死不活的状态到如今的主导地位。
React 是 Facebook 在 2011 年产出的，在那个年代处于主导地位的是 jQuery 及 BACKBONE.JS
同时期的 Ember、Angular 和 Knockout 也大有赶超之势：
那时候《江南Style》刚刚被上传到油管上、《Call Me Maybe》高居榜首、Freshest Meme 是 Overly Attach Girlfriend(这是什么?)
Overly Attach Girlfriend 翻译过来就是过度依赖的女友，这里我没太懂是什么意思。于是查了半天资料，感觉大概是早期的女网红，这是她的外号。视频里瞪大双眼盯着镜头的视频发布于 2012-6-7，获得了 21,311,159 的播放量（相当惊人的数据）
《江南Style》对于大家来说应该很熟悉了，这首歌不仅火遍大江南北，并且在欧美那里也掀起了一阵狂潮。不过真的很难把 React 和《江南Style》联系到一起去，没想到它俩居然是同时代的产物。
接下来就是正式内容了，来看看这些大佬们大家都能认出来几个：
这些可都是 React 背后的男人们(听起来怎么怪怪的)
第一位出场的大佬是 Pete Hunt：
当他得到 Facebook 的 offer 时很兴奋的告诉了老妈，那时刚好有部叫《社交网络》的电影上映：
老妈听到了以后劝他赶紧入职，因为感觉扎克伯格那小子挺操蛋的(看过这部电影的都知道扎克伯格的人品)，别再反悔咯！
由于本片时间太长，制作文章的过程中发现文章越来越长，动图也越来越多导致整体观感不佳。所以删减了部分没什么太大意思的片段，只保留了关键部分。如果想看完整版的话建议去油管上搜索
React Documentary，目前只有生肉没有熟肉，需要听力十分过关才能听懂。
那时候的 JS 很不成熟，别说 ES6 了，ES5 都无法普及呢！所以这位大佬觉得 JS 只是门玩具语言，产生的一系列框架也都是玩具，不足以支撑他们开发大型复杂应用：
我知道有人可能会说：这些好多应该也不算框架吧？顶多就是个库，React 也是库而不是框架。话虽如此，但我可不想每次写的时候都要写成：框架/库，或者每次都需要刻意区分一下。片中的大佬也用的是 Framework(框架) 这个词，咱就不要因为这个而杠了，也不是写论文那么严谨，为了观感体验就统一都称之为框架好吧！大家能明白意思就行，就不用像文字狱那样咬文嚼字了。
那时候 Facebook 开始与苹果公司展开了激烈的竞争，与苹果公司理念不同的是 Facebook 认为成功的关键在于 Web。如果能成功推动 H5 的发展那当然再好不过了，所以他们开发了一款名为 Bolt.js 的框架：
之所以叫这个名字是希望能像闪电和螺栓那样把各个框架的优点集合到一起：
听完这一说法后的我：
你们想把各大框架的优点集合到一起的这个想法是好的，但和闪电螺栓有啥关系？用螺栓把各大框架钉上？他们觉得 Bolt 比当时市面上的其他几款框架都要好：
看起来写法有点像是 React 0.15 的写法，因为早期的 React 正是 Bolt 那帮人写的。 而且我才知到的一个很有趣的冷知识：React 一开始叫 FBolt，大家一看这名字可能会问 F 是啥意思？Facebook Bolt？其实这个 F 代表的是 Functional(函数式)，而 React 的中心区域正是一颗螺栓的形状：
他们觉得当时前端最难的部分是需要先找到变动的 DOM 节点，来看一眼这张图：
大家能联想到什么？虽然 jQuery 在性能上有优势，但在过程中就像上面那张动图一样不知走了多少弯路。而对于 React 而言虽然性能不如 jQuery，但在过程中简直完胜啊！React 不用像 jQuery 那样手动的、人工的找到需要变动的 DOM 节点，填充一遍数据后再把 DOM 塞回去。这么做简直太智障了，而这也正是大部分的 bug 来源。工程师们把大量的精力都投入到了操作 DOM 上，稍有不慎就会出现匪夷所思的 bug，而且还特别难以排查。
Facebook 团队里有个叫陈静(音译)的华裔：
大名鼎鼎的 Flux 架构就是她提出的 ：
并且在 React 的早期阶段她起到了至关重要的作用：
当时在 Facebook 内部有仨框架，他们分别是 Bolt、JS HTML 以及 React：
随着时间的推移，慢慢的只留下来了 Blot 和 React，这是两款在写法上非常相似的框架：
仔细看一眼它俩的代码：
// Blot
const core = require('bolt/core');
const View = require('bolt_touch/view').View;
export const Button = core.createClass({
extend: View,
declear: (options) => {
const model = options.model;
return (
<button bind:class={(model, 'btnClass')}>
<span class="label" bind:content={model, 'label'} />
<img class="icon" bind:src={model, 'src'} ref="icon" />
</button>
)
},
onClick: (evt) => {
console.log('btn clicked');
},
onIconClick: (evt) => {
console.log('icon clicked');
},
});
// React
const React = require('react')
export const Button = React.createClass({
render: () => {
return (
<button className={this.props.btnClass} onClick={this.onClick}>
<span className="label">{this.props.label}</span>
<img className="icon" src={this.props.iconSrc} onClick={this.onIconClick} />
</button>
)
},
onClick: (evt) => {
console.log('btn clicked');
},
onIconClick: (evt) => {
console.log('icon clicked');
},
});
虽然写法相似但运行原理却大不相同，而且维护两个框架无论是从人力资源上还是从使用者的角度都不是最优解。最优解就是干掉其中一个框架，主推另一个框架。那么被干掉的是谁呢？从今天 React 的地位来看被干掉的无疑是另一款框架了，因为这事还闹出了诸多不快。因为对 React 而言用它做出来的成功案例并不多，不像 Bolt 已经久经考验了（因为React是后出的）但从另一方面来讲 Bolt 又没有 React 灵活、没它先进。而且如果是你的话，你在公司里已经用 Bolt 开发了很多项目了，突然有人说要干掉 Bolt，你会愿意吗？
与 Vue 纪录片以及 Svelte 纪录片有很大的不同就是这个纪录片有很多篇幅都是在讲这些扯皮事，毕竟 Vue、Svelte 这些框架刚开始时都是由个人来进行主导创作的。即使在今天，那些框架里百分之八九十的代码也都是由原创者来进行贡献的，就能少很多这样的拉扯。看完前半段真的是有点无聊，压根就没讲多少技术方面的，净讲怎么博弈了：这个怎么说服那个、那个又怎么质疑这个、最终经过了多少重重险阻才能够达成一致… 不过这也确确实实是在大公司里做开源的真实历程，那我们继续往下看吧，希望后面的内容能更精彩一些。
开源
最终他们说服了这个说服了那个（净是些扯皮的事）决定开源，他们决定扭转 Facebook 的开源形象，因为以往的 Facebook 开源项目通常都是烂尾的，先开源出去给大家画个大饼，完了升 P 了就没人维护了，开始下一个 KPI 项目。这个剧本是不是挺熟悉的，这不阿里么？
然后他们开始选择在哪来进行开源，看到这的时候我还一愣，除了在 GitHub 上还能在哪开源？看到后面我才明白过来，他们说的在哪开源指的是在哪进行首发宣传，最终他们选择了 JSConf：
他们说 JSConf 有点像是 JavaScript 届的奥斯卡，视频里这个小金人特效让我想起了某尔街之狼：
这是部伟大的影片，建议拉上全家一起观看：
那是佛罗里达的一个早上，他们乘坐巴士来到了办公室，都9点多了办公室居然空无一人，万恶的资本主义上班那么晚下班那么早，不利于大家奋斗。哪像我们的狼性文化：比待遇越比心胸越窄，讲奉献越讲境界越高：
狗头都快不够用了，他们那么早(9点)来办公室准备干嘛呢？准备配合他们正在演讲的同事按下按钮迎接开源：
记住下面这位名叫乔丹的大佬，他才是 React 的真正创造者。前面的视频各位大佬一直都在提这个叫做乔丹的男人，但奇怪的是我从未见过他在视频中露面，这是他第一次在这个纪录片出镜：
准确的说应该也不算是在纪录片中出镜，因为这一看就是从以前的视频录像里截的，不知为何到现在也没能见到这位大佬。总之大家对这个叫 React 的框架持怀疑态度，对 JSX 语法更是反感。这也很正常，任何新事物出现的时候大家都会持怀疑态度，唯有时间能够证明一切。来看看当时在推特上大家都是咋说的吧：
什么!？
#react!？在JS里写XML，这也太蠢了吧！这简直是个烂到不能再烂的创新！@#JSConf
所以… "
JSX" emmmmmm…
React这不是违背了关注点分离了么？
React出师不利啊！
这太糟糕了，确定不是从
PHP那里学的？
哦我的上帝啊！
JSX… 为什么？究竟为什么?? 不要再搞JS方言了！
看到大家的反应，大佬们很失望。因为他们花了好几个晚上和周末来把这个内部项目改造的更适合开源，但没想到却引来了一篇骂声，太让人羞愧了！
虽然这段代码看起来像是写了一段
DOM，但实际上并不是，接下来大家就会明白这是什么。
但其实大家都没怎么听他们接下来说的为何 JSX 对我们有很大的帮助以及设计理念是什么就开喷了，而且他们根本搞不明白到底是为啥？大家为何如此反感 JSX？一直揪着在 JS 里写 XML 这点不放，在 Facebook 里用的时候大家都说好，怎么一开源就变成这副德行了… 他们后来也进行了反思：他们没有真正的理解前端的世界有多大，没有预料到 Facebook 之外的前端开发与 Facebook 的工程师思维之间能有多大的差异。不过他们并不怪大家，也不认为那些发推特狂喷的人是疯子，他们觉得也许大家说的是对的，他们自己才是真正的疯子。
这让我想起了一句至理名言：
真正的天才在成功之前往往都会被大家认为是疯子。 ——— 沃·滋基硕德(我·自己说的)
这件事对 Raect 团队产生了很大的打击：有的人失去了信心、有的人很生气：他们甚至都没用一下 React 就喷、都没有花时间去思考一下 React 的理念、还有人开始进行了反思：在 Facebook 他们是一个规模较小的团队，当团队中有质疑或是不理解的声音出现时，他们可以把大家拉到一个小会议室里去面谈，当众去用自己的观念来说服大家。同时也会为大家答疑解惑，消除大家的疑虑。但很显然他们不可能把全世界所有质疑的声音都叫到 Facebook 来开会，也不太可能在每条评论下面挨个的去反驳，这样显得 React 团队跟个杠精团队一样，很可能会取得适得其反的反作用。
当时比较流行的观念是关注点分离原则，就是说你不应该把 HTML、CSS、JavaScript 写在一起，应该把它们仨分离开来：
这就是当年的最佳实践，React 的理念恰好和当时的最佳实践背道而驰，这理所当然的会令大家感到不爽。那么大家有没有想过为什么明明违背了关注点分离原则，但 React 却还是能够一路高歌猛进冲向神坛。这是因为虽然 React 违背了当时的关注点分离原则，但却创造了另一种更为先进的关注点分离原则。想想看是不是这么一回事，在那个年代并没有组件化的概念，所以关注点分离指的就是 HTML、CSS、JS 三权分立。虽说这样做在一定程度上确实提高了可维护性，但为什么不能根据功能、根据组件来进行分离呢：
所以说并不是历史在开倒车，大家只注意到了违背 HTML、CSS、JS 的关注点分离原则，但却没有注意到 React 开创了以组件为单位的新关注点分离原则。然后就出现了菜鸡们质疑大佬们的一幕：
他们觉得 Facebook 的工程师都是傻X不会写代码，想了一些明显违背了最佳实践的主意就敢对外进行宣传。这些言论让 React 团队感觉这款框架在 Facebook 以外的世界不会有任何前途，然而令他们感到意外的是：第一个用 React 的程序员(非Facebook员工)在用了一段时间后觉得这玩意非常棒！并在互联网上帮 React 说了很多好话。我们一起来看一下她的经历吧：
她当时正在开发一款比较复杂的数学编辑器，用的是 backbone.js，但随着应用越来越复杂，状态管理也变得越来越难。正在这时她发现了 React，感觉这玩意能够解决很多她所遇到的问题，事实也确实如她所料，就这样她成为了 React 的第一个粉丝。在使用了一周后她写了一篇类似于观后感一样的帖子，在帖子里她说自己刚刚用 React 重写了 2000 行代码的一个应用，并且还给 React 提了 PR。到目前为止她所看到的 React 相关的一切似乎都是经过了深思熟虑后的设计，她很荣幸能够成为 React 的第一个非 Facebook 用户：
在评论区有人问她：React 跟其他流行框架比起来怎么样？
她对 React 做出了非常高的评价：
我最喜欢
React的一点就是它特别易于理解，举个例子：如果你在Angular的文档里去看《如何编写一个指令》这一章节时(在当年的Angular里，一个自定义指令就相当于一个可复用的组件了)，它需要先解释一遍指令的优先级、指令的编译和连接之间有何不同、如何创建一个新作用域等… 这些东西全都是Angular特有的发明创造。但在React里你只需要理解JSX语法，剩下别的全都是JavaScript，你的JS技能在这里能够得到完美的发挥，我认为React比其他框架都要好。
我爱
React！并且我现在正在劝我同事们跟我一起用React