React 長期以來的「歷史主導地位」如何慢慢被暴漲的 Vue 所超越

2020-12-16 腳本之家

對Facebook推出的React仰慕已久,一直沒有找到合適的機會嘗試,而react早已經是最熱門的前端框架,coding.net的WebIDE,墨刀的web原型設計應用,都是非常成熟的react應用;最近正好前後端都有很多想法,周末花一天時間折騰了一翻,順利的完成入門訓練。

React簡單介紹

React一般被用來作為MVC中的V層,它不依賴其他任何的庫,因此開發中,可以與任何其他的庫集成使用,包括Jquery、Backbone等。它可以在瀏覽器端運行,也可以通過nodejs在服務端渲染。React的思想非常獨特,性能出眾,可以寫出重複代碼少,邏輯清晰的前端代碼。

上周在前端的 JavaScript 框架世界發生了一件稱得上是「裡程碑」的事:Vue.js 在 GitHub 上的 star 數量終於超過了 React.js 的 star 數量。

通過使用一個叫做 Star History 的工具,我們可以清楚看到:React 長期以來的「歷史主導地位」是如何慢慢被暴漲的 Vue 所超越。

通常情況下,當框架的流行度提高時,往往會引發大量關於哪個框架「確實」更受歡迎、哪個框架更強大以及其他方面的爭論。

項目的 star 數量 vs 實際使用情況

不要誤解我的意思,我很喜歡 Vue —— 最近我使用它的頻率遠遠超過了 React 的頻率,但一個項目在 github 上的 star 數量更多的是衡量它的「流行」程度,而不是實際使用情況。下面舉一個明顯的例子,我們拿比較流行的 Apache 伺服器 httpd 和一個相對來說意義沒那麼重大的 JavaScript 項目 colors.js 來對比:

支持著 38% 網際網路的 Web 伺服器在 GitHub 上擁有 1766 個 star,而為 Node 控制臺添加顏色的 JavaScript 庫有 3206 個 star。因此,為了更好地了解 Vue vs React 的相對流行度,我們需要一些方法來衡量項目的實際使用情況。

用項目在 NPM 的下載量作為實際使用情況的參考

沒有存在完美的衡量手段 —— 因為安裝和使用這些項目有很多種辦法,之所以選擇了 npm 作為參考是因為 npm 已經成為安裝 JavaScript 包的事實標準。如果我們查看每個框架的核心軟體包的下載統計數據 —— vue 軟體包和 react 軟體包,它們應該能反映出合理的實際使用情況。為此,我使用了一個名為 npm-stat.com 的網站,通過該網站,你能生成可回溯到2015年2月的 NPM 軟體包的歷史下載圖(這與 NPM 註冊管理機構報告下載數據的時間相同)。

由數據可知:React 仍然處於主導地位

縱觀過去兩年的數據,我們可以看到,與 github 的 star 數形成鮮明對比的是,根據 NPM 軟體包的下載量來衡量,React 仍然在實際使用方面佔據主導地位。

這並不是說 Vue 在被採用方面的數據表現不佳 —— 事實上,Vue 在這方面的倍數略有增加,從2016年6月大約 12:1 的比例(1.693M vs 141.5k)下降到2018年5月 7:1 的比例(9.388M vs 1.374M),兩者的差距明顯的縮小了。但在實際使用方面, React 仍然與 Vue 保持著巨大的差距

添加 Angular 以進行綜合對比

雖然上面的討論主要集中在 React 和 Vue,但我們還是要看一下前端「三大」框架的其他成員,Angular。由於 Angular 社區包含 "Angular.js" 和 "Angular" 這兩個版本(Angular 2 及之後的版本都叫 Angular,使用 TypeScript 編寫),因此將這兩個都添加到我們的比較中。

首先,就 github 的 star 數目來看:

我們可以看到 Angular.js 與 React 和 Vue 相比曾一度處於領先的地位,但在2016年年中被 React 超越,然後2017年被 Vue 超越。第二個迭代版本 Angular 自2016年9月推出以來,它的 star 數目逐漸上升,現在也已經慢慢趕上了 Angular .js,但在受歡迎程度方面依然處於第四位。

Angular 的 NPM 下載情況

觀察兩個 Angular 版本的實際使用情況而不是 star 數目,我們可以發現不一樣的東西。

'angular' 即 Angular.js,@angular/core 是 Angular

從使用方面來看,新版 Angular 在發布後立即從 Vue 和 Angular.js 中冒出來,從那時起一直保持領先地位,儘管遠沒有接近 React。在此期間,Vue 在2016年9月的下載量約為 Angular.js 和 Angular 總和的 1/3,並於2018年5月達到 1/2,還超過了 Angular.js。

總結:React 仍處於主導地位,Vue 增長得越來越快

通過深入了解 NPM 的下載統計數據,我們發現儘管大家都圍繞著 Vue 瘋狂增長的 star 數來大肆宣傳,但 React 仍然在 JavaScript 框架世界中穩坐「主導」的位置。它即將超過每月1000萬的巨大下載量,並且還一直保持著高速的增長。但在過去的兩年中,Vue 的增長速度比其他任何主流的 JavaScript 框架都快,最近趕上了 Angular.js,並逐漸縮小了它與 Angular 和 React 之間的差距。

相關焦點

  • 前端技術:React&Vue對比
    React和vue的業務邏輯是差不多,vue在react上封裝了更簡潔的方法,使用起來更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),還提供了更多的屬性(computed,watch),我還是比較喜歡用react的,更接近js原生,更容易於理解它。
  • 前端諸神大戰,Vue、React 依舊笑傲江湖
    那麼,項目搭建框架時該如何選擇才能得到更適合的效果呢?且看本文分析。整理 | 彎月 責編 | 張文頭圖 | CSDN 下載自視覺中國自 2010 年 AngularJS 第一版發布以來,前端框架的發展經歷了十個年頭,前端框架大戰也幾乎告一段落。
  • Vue、React、Angular之三國殺,web前端入坑第六篇(上)
    vue、react、angular對比和選擇 這個話題我在vue1.x 時代 2016年 就想寫了,可時光如梭,懶癌侵身,一個擱淺便是這麼多天。vue都2.5了,angular 都變成了另外一種框架了,不敢想,不敢想, JavaScript 開發框架發展的是如此之快。如果有不知道mvvm概念的同學,請先回顧我 入坑第五篇: 秒懂前端框架歷史和MVVM框架原理!
  • 快速在你的vue/react應用中實現ssr(服務端渲染)
    摘要ssr(服務端渲染)技術實現方案接下來筆者將列舉幾個常用的基於vue/react的服務端渲染方案,如下:使用next.js/nuxt.js的服務端渲染方案>使用node+vue-server-renderer實現vue項目的服務端渲染使用node+React renderToStaticMarkup實現react項目的服務端渲染傳統網站通過模板引擎來實現ssr(比如ejs, jade, pug等)
  • 適合Vue用戶的React教程,你值得擁有(二)
    數據data,在react中叫state熟悉vue的小夥伴一定對Vue中的data不會感到陌生的,反正天天寫Bug的時候都要用,但是對於data來說,在Vue2.0,Vue3.0,React中用法是不同的,我們下面依次舉例說明Vue2.0中的用法如下代碼是一個比較簡單的Vue2.0的data
  • 三年React 開發經驗的我,遷移到 Vue 的心路歷程
    最初僅有 React,後來使用 Redux 和 React 的其他庫(react-router、react-redux、prop-types 等)配合使用。我喜歡 React 的簡單和方便,使用 React 的時光一直都很快樂。我喜歡這個時代,有太多的好工具幫助我們更快更好地開發應用。
  • React Hooks 與Vue3.0 Function based API的對比?
    下面讓我們看一下 useEffect Hook 是如何實現上述需求的:import React, { useState, useEffect } from 'react';function Example(props) { const [isOnline, setIsOnline] = useState(null);
  • vue高級進階系列——用typescript玩轉vue和vuex
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫用過vue的朋友大概對vuex也不陌生,vuex的官方解釋是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
  • 多角度對比React和Vue
    例如,當組件狀態準備就緒時,所創建的hook會被觸發,但是在組件安裝在頁面之前。  一個很大的區別:沒有 shouldComponentUpdat,因為Vue的reactivity系統不需要。  重新渲染  Vue的初始化步驟之一是遍歷所有數據屬性,並將其轉換為getter和setter。
  • 手把手教你用JS/Vue/React實現幸運水果機(80後情懷之作)
    快速入門vue框架的應用快速入門react框架的應用對比原生js,vue框架和react框架開發的優缺點。讀者對象學習本課程的同學,了解一點HTML/CSS/JS基礎知識即可,我們會就地講解項目中用到的css,js基礎知識點,先舉一些小的示例,來闡明知識點的用法,再說明如何在本項目中應用,應用在哪塊功能的實現上。
  • 我居然把 Vue3 的原理用到了 React 上?
    前言vue-next是Vue3的源碼倉庫,Vue3採用lerna做package的劃分,而響應式能力@vue/reactivity被劃分到了單獨的一個package中。如果我們想把它集成到React中,可行嗎?來試一試吧。
  • 如何優雅地解決多個 React、Vue App 之間的狀態共享
    , useReducer } from "react";import ".然後接著解決如何保證在同一顆 React Tree 的前提下將不同的業務組件掛載在不同的 DOM 節點。再簡單說明一下我們現在需要解決的問題。
  • kpc v0.7.8 發布,同時支持 Vue/React/Intact 的前端組件庫
    所以這時kpc應運而生,它存在的意義就是:同一套組件庫適應不同框架 (Write once, run anywhere)特性安裝在Intact下npm install intact kpc --save在Vue下npm install kpc intact intact-vue --save
  • 框架React vs Vue
    如果你有類似Tab/Navigation,而不想重新渲染,選Vuevue路由官方支持Keep-alive react路由暫時不支持,需要有第3方的狀態管理/或者其他路由來代替,你還需要自己記錄滾到位置,實在有點反人類。
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    /vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • 關於 Vue 和 React 區別的一些筆記
    因為一般都會用一個數據層的框架比如 Vuex 和 Redux,所以這部分不作過多解釋,在最後的 vuex 和 redux的區別 中也會講到。數據流的不同大家都知道Vue中默認是支持雙向綁定的。這些都是vue創建組件實例的時候隱式幹的事。由於vue默默幫我們做了這麼多事,所以我們自己如果直接把組件的聲明包裝一下,返回一個高階組件,那麼這個被包裝的組件就無法正常工作了。推薦一篇很棒的文章講的是vue中如何實現高階組件 探索Vue高階組件組件通信的區別
  • 精通react/vue組件設計教你實現一個極具創意的加載(Loading)組件
    正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先看看實現後的組件效果:因為動圖體積太大,就不給大家傳gif了,接下來我們具體分析一下該組件的特點.1. 組件設計思路按照之前筆者總結的組件設計原則,我們第一步是要確認需求.
  • JavaScript年度調查報告:React、Vue和 Angular三分天下,誰將在...
    因此,面對各有千秋的開發框架,作為一名開發者該如何選擇?哪種框架更具有前景?接下來,本文作者通過近日***發布的 JavaScript調查報告,分享其 15年的 Web開發經驗,深度剖析前端框架的流行趨勢及未來發展,希望給諸多前端開發者指明一些方向。
  • 精通React/Vue系列之帶你實現一個功能強大的通知提醒框
    /Node,快快加入我們吧'});我們看到的組件效果可能是這樣的:那麼我們如何實現這樣的調用方式呢?正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先來解構一下Notification組件, 一個Notification分為以下幾個部分:每一個區塊都可以自定義配置, 也可以組合其他組件.並且我們可以配置提醒框出現的位置,就像antd
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI