React框架發展史

原文地址： https://www.deaboway.com/react框架發展史.html#.YHr1L0j7QZE

React開源地址：https://facebook.github.io/react/index.html

內容 隱藏

1 1.前端發展背景

2 2.誕生原因

3 3.基本介紹

4 4.重要版本發布

5 5.React核心原理心路歷程

6 6.6個React亮點

1.前端發展背景

前端混沌時代在“前端混沌時代”，頁面主要在服務端開發并生成，服務端生成什么頁面，瀏覽器端就展示什么樣的頁面，這個時代，是多么單純，

小前端時代隨后進入“小前端時代”，形成了以HTML為骨架，CSS為外貌，JavaScript為互動體驗的前端開發模式，在這個時代，出現了Ajax這種劃時代意義的技術，讓靜態網頁升級為動態網頁，并隨著JavaScript的發展，前端能做更加多樣的頁面，當時出現了jQuery這類JS工具庫，主要用來「操作DOM」，「處理資料互動」，至今仍有很多老舊專案依然在使用jQuery，

大前端時代在小前端時代穩定發展一段時間之后，工程師們開始發現前端「需要呈現的資料量越來越大」，「網頁動態互動效果也越來越多」，jQuery這類工具庫「越來越頻繁操作DOM」，使得應用性能越來越差，頁面越來越卡，慢慢前端大佬們開始解決這些問題，

在2009年誕生了NodeJS，將前端帶入全新方向，為AngularJS（2009年誕生），React（2011年誕生）和Vuejs（2014年誕生）三大框架的「誕生奠定基礎」，這些框架通過一定的分析比較演算法，實作同等效果下最小的DOM開銷，提高應用性能，前端開發進入“大前端時代”，

全堆疊前端時代“大前端時代”之后NodeJS社區蓬勃發展，4G網路也在不斷普及發展，很多傳統PC網站開始轉向手機、平板等移動端設備，開始出現了混合應用技術（Hybrid APP），出現了各種開發框架，如Cordova、React-Native、Weex、Electron等，還有最近比較火的Flutter，

隨著TypeScript的出現，和ECMAScript標準日漸完善，「前端開發正在朝著更加全能化」，「多樣化和更加細分領域的方向發展」，

2.誕生原因

React是Facebook在2013年開源的一款前端框架，在這之前，Facebook工程師開發一個簡單功能時，如下圖界面中“小紅點”功能：

在導航欄中有“新好友”、“新訊息”和“新動態”三個功能按鈕，這其實功能挺簡單，但卻經常出BUG，比如“收到新訊息后，新訊息的圖示上數字沒有正確更新”等問題，「他們找尋出現這種問題的深層次原因」，最終總結為兩個原因：「工程師太過關注UI層面的細節操作」；「應用程式的狀態較為分散，無法追蹤和維護」，

這里再介紹下React出現的時代背景：「大量業務邏輯由后端轉為前端實作」，即前后端分離；已有前端框架開發的「復雜應用性能不佳」，

當時由于Ajax技術興起，大量原來由服務端處理的邏輯，慢慢轉移到前端做處理，這也是為了追求更流暢的Web互動體驗，后來為了「提升開發效率和應用性能」，開始有很多大型前端框架出現（如：AngularJS），這些框架也讓工程師們越來越關注UI層面的操作（如：頻繁操作DOM），「應用性能越來越差」，并伴隨無法預知的BUG出現，就像前面講到的Facebook工程師總結的原因之一，

之后Facebook工程師開始打造自己的前端框架，解決前面總結的問題，于是React就誕生啦～

3.基本介紹

Facebook認為MVC無法滿足他們的擴展需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得復雜，每當需要添加一項新功能或者特性時，系統的復雜就成級數的增長，致使代碼變得脆弱而不可預測，結果導致他們的MVC正在土崩瓦解，認為MVC不適合大規模的應用，當系統中有很多模型和相應的視圖時，其復雜度就會迅速擴大，非常難以理解和除錯，特別是模型和視圖可能存在雙向資料流動，

解決這個問題需要“以某種方式組織代碼，使其更加可預測”，這通過Flux和React來完成，

Flux是一個系統架構，用于推進應用中的資料單向流動，React是一個JavaScript框架，用于構建“可預期的”和宣告式的”Web用戶界面”，它已經使Facebook更快地開發Web應用，

ReactJS最開始只是XHP的一個擴展.簡單說說XHP,它是Facebook2010年推出的PHP新的書寫方式,旨在讓前端開發變的更簡單,除此之外,它還能防御跨站點腳本攻擊（XSS）,XSS對于有經驗的Web開發人員就再熟悉不過了,它允許用戶惡意將代碼注入到網頁中,是一種常見的Web應用程式的安全漏洞攻擊.XHP有Automatic XSS protection的功能,能夠很好地規避以上問題.

然而，XHP在創建動態Web應用程式時卻出現了問題，比如一旦應用程式state發生了改變，整個程式將會重新render，這必將導致用戶失去之前存盤在DOM中的所有資料，這讓Facebook的AdsOrg團隊不得不深思：為什么要重新渲染整個Page，只因為其中一個state的改變？他們及時地意識到這個問題，這樣的Web應用程式將對未來的用戶體驗造成嚴重的干擾，

2011年，Facebook高級軟體工程JordanWalke開始著手解決這個問題:如何讓Web應用程式更加高效，更好地提升用戶體驗，就這樣，一個用于構建用戶界面的JavaScript庫誕生了，

就在當時，Instagram想用React來構建他們的網站，然而，卻遇到了很多的問題，比如React跟Facebook的stack聯系可謂十分緊密，但他們并沒有放棄，反而做了很多的作業，他們希望，今后全世界的開發者都會慶幸有React這么棒的東西

2013年5月，React在美國JSConf開源，自那以后，全世界的開發者都很快地將React投入到了生產環境中，像Trello，Slack，Docker，Airbnb，KhanAcademy，NewYorkTimes這些公司都沖在了前列，

2015年4月，Facebook發布了關于使用React的專利，說:只要不起訴我們專利侵權，我們就免費給你使用該軟體，你可以點擊這里閱讀關于專利的更多內容：https://github.com/facebook/react/blob/master/PATENTS

4.重要版本發布

如下嵌入需要科學上網能力：

點擊查看時間線！！！2010-react最初跡象FB引入xhp到php代碼中，同年開源，Xhp允許創建復合組件，后期引入至react中，

2011-早期原型JordanWalke創建FaxJs，react的早期原型，支撐了FB的一套搜索組件，

2012-fb新變化FBAD管理難度加深，FB需要找到更好解決方案，JordanWalke基于原型創建了react，4月9日，FB收購Instagram，Instagram想使用FB的新技術，基于此，FB受壓之下考慮解耦并開源React，這些大部分由PeteHunt完成，9月8日至12日：TechCrunchDisrupt舊金山峰會上，馬克扎克伯格表示：我們最大的錯誤就是壓太多寶在HTML5上了，他承諾FB將會很多提供更好的移動體驗，

2013-發布之年5月29日至31日：JSCONFUS峰會，JordanWalke介紹React，React開始開源，有趣的是：觀眾表示質疑，參會的早期框架使用者中大部分人認為React是很大的退步，但React定位于創新者，React的創建者及時意識到錯誤，決定后續開啟React宣傳之旅，讓他們由質疑轉為支持，6月2日：React接入JSFiddle7月30日：React和jsx接入RubyOnRails框架8月19日：React和jsx接入Python應用9月14日至15日：JSCONFEU大會，PeteHunt發布“重新思考最佳實踐”的主旨演講12月17日：DavidNolen介紹基于React的OM框架，介紹中解釋了React的高級特性，獲得一批早期的支持者，文中解釋React如何優于其他方案，進一步提高React的認知度，

2014-擴張之年React逐漸獲得了聲譽，開始走向潛在用戶中的早期使用者，這時候，FB團隊需要傳達React如何穩定的訊息，而不是簡單依賴其技術優勢，基于這點關注，他們開始轉向吸引企業用戶，如：Netflix，2014年早期：#reactjs world tour大會開啟，創建社區，開始把質疑者變為支持者，1月2日：React Developer Tool成為谷歌開發者工具的插件，2月：21世紀極客編輯器-Atom發布4月7日至9日：ReactLondon2014大會召開6月：ReactiveX.io成立7月13日：React熱加載器發布,它是一個可以熱加載React組件，同時不丟失state資料的插件，12月12日：PlanOut，一項用于在線實驗的語言發布，發布的0.5版本中包含一個基于React實作的Planout語言編輯器，引入FB內部使用的完整特性的編譯器，

2015-走向穩定2015年早期：Flipboard發布React Canvas1月：Netflix表示喜歡React2015年早期:Airbnb開始使用React1月28日至29日：Reactjs Conf 2015大會，FB在一次技術演講中發布了React Native的第一個版本，2月：發布Relay和GraphQL3月25日：FB宣布RNIOS開源并提交Github.6月2日：DanAbramov和AndrewClark發布了Redux9月2日：ReactDeveloperTools第一個穩定版本發布，9月14日：RNAndroid發布

2016-引領主流3月：Mobx發布2月22日至23日：Reactjs2016大會在舊金山舉辦，IsaacSalier-Hellendag介紹Draft.js3月：React Story book發布6月2日至3日：React歐洲大會舉辦7月11日：React的錯誤代碼系統發布11月：ReactUI工具集Blueprint

2017-改進之年2017年早期：Airbnb發布開源庫ReactSketch.app4月19日：F82017大會ReactFiber開源9月：React,Jest,Flow,andImmutable.js更換授權許可9月26日：React16發布，包含:errorboundaries,portals,fragments和Fiber架構等一系列特性10月：Netflix移除客戶端Reactjs11月28日：Reactv16.2發布，提供Fragment優化改進

2018-趨于穩定3月1日-2日：ReactCONF冰島大會，DanAbramov發表超越React16演講3月29日:React16.3.0發布時至今日，React最新版本為16.13.1，仍在16的大版本中，

5.6個React亮點

Virtual Document Object Model為了搞清楚這個,我們假設有一個物件,它有很多個屬性,然后,我們去修改其中的一個屬性的值,這時,React Virtual Document Object Model的高效Diff演算法就起作用了,它會首先快速識別出哪些屬性發生了改變,而且它將這個程序的復雜度控制在了O（n）,接下來就是非常了不起的reconciliation操作,它只會對界面上真正發生變化的部分進行實際的DOM操作,而不是整個DOM,這讓我們可以無需擔心性能問題而毫無顧忌的隨時重繪整個頁面了,就問屌不屌.

Server-Side RenderingReact可以很優雅地實作Server-Side Rendering.即當用戶向應用程式發送請求時,服務器會將其所需要的組件渲染成HTML字串,然后把它回傳給瀏覽器,之后,瀏覽器直接決議HTML就行.這樣不僅縮短了回應時間,提升了用戶體驗,而且有利于SEO,最后,還給開發者帶來了組件式開發和代碼同構的便利.

React NativeReact Native于2015年發布.它支持開發者用JavaScipt和React構建真正native的Android和iOS應用.這樣,我們就不需要再去拼命地學習Java和Objective-C了.

React VRReactVR在最近的F8DeveloperConference上發布.它允許用戶只用JavaScipt就能構建virtualreality(VR)應用.ReactVR還能用WebGL和WebVR給用戶帶來完美的VR體驗.最后,跟React一樣,開發者也可以采用宣告組件的方式.

React FiberReact Fiber將在React16中閃亮登場,最初于2016年7月公開發布,它是Facebook開發的一個全新的架構,不僅包含新的協調引擎，而且提供了可串聯使用的全新渲染器.該架構可向后兼容，徹底重寫了React的協調（Reconciliation）演算法,蘊含著過去多年來Facebook不斷改進的作業成果.你可以訪問該鏈接跟進發布.

React Primitivesreact-primitives是LelandRichardson創建的一個庫.該庫提供了一套理想的primitives讓不同平臺中的React應用程式都可以使用.

參考文章：https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/TheevolutionofReact(FISAYOAFOLAYAN)http://t.cn/R9XYOF5https://blog.csdn.net/hhthwx/article/details/80071056https://zhuanlan.zhihu.com/p/159472034https://www.jianshu.com/p/bf26262be4f2