2013 年 5 月 29 日，React 正式開源，至今已過去了十年！自發(fā)布以來，React 已經(jīng)成為前端開發(fā)領域中最受歡迎的技術(shù)之一，其生態(tài)系統(tǒng)越來越豐富，Github 累計獲得了 208k Star，每月 npm 平均安裝量達到了 200w。本文就來總結(jié)十年來 React 的重要里程碑！

2011：早期原型

2011 年，F(xiàn)acebook 工程師 Jordan Walke 創(chuàng)建了FaxJS[1]，它是 React 的早期原型，幾個月后，F(xiàn)acebook 的團隊使用完全由 React 和 Flux 提供支持的版本構(gòu)建了點贊和評論功能。

Facebook 于 2012 年收購了 Instagram。Instagram 決定采用 Facebook 的新技術(shù)（React）來構(gòu)建其網(wǎng)站。這就存在一個問題：React 與 Facebook 的軟件技術(shù)棧緊密集成。Pete Hunt 當時建議將 React 與 Facebook 解耦，并完成了將其解耦所需的大部分工作，從而使 React 成為開源軟件。

(資料圖片僅供參考)

2013：發(fā)布之年

在 2013 年 5 月 29 日至 31 日舉行的 JS ConfUS 期間，Jordan Walke 向全世界介紹了 React，宣布 React 成為一個開源項目。他表示：“在構(gòu)建我們的組件框架時，我們力求最小化暴露給開發(fā)者的面向開發(fā)者的變化的數(shù)量”。當時的觀眾持都對 React 持懷疑態(tài)度，認為 React 代表了代碼可維護性方面的重大倒退，因為將 HTML 嵌入到了 JavaScript 中。大多數(shù)“早期采用者”都參加了這次會議。

2014：擴張之年

2014 年初，隨著開發(fā)人員開始采用 React，React 的創(chuàng)建者計劃了參觀和會議來建立社區(qū)，來贏得開發(fā)者的認可，并幫助他們認識到 React 是為創(chuàng)新而設計的。同時，React Developer Tools[2]也成為了 Chrome Developer Tools 的官方擴展。同年，發(fā)布了React Hot Loader[3]，一個允許 React 組件在不丟失狀態(tài)的情況下實時重新加載的插件。

2015：穩(wěn)定之年

在 2015 年 1 月的 React.js 大會上的技術(shù)演講中，F(xiàn)acebook 發(fā)布了 React Native 的第一個版本，可以輕松進行 Android 和 iOS 開發(fā)。

此外，React v0.13[4]于 2015 年 3 月發(fā)布，最引人注目的新特性是對 ES6 類的支持，這讓開發(fā)人員在編寫組件時具有更大的靈活性。Dan Abramov 和 Andrew Clark 發(fā)布了Redux[5]，同時也推出了第一個穩(wěn)定版的 React Developer Tools。

React v0.14[6]于 2015 年 10 月發(fā)布，此版本帶來了一些重大變化。主要的 react 包被拆分為 react 和 react-dom，這使得編寫在 Web 版本的 React 和 React Native 之間共享的組件成為可能。此外，refs 作為 DOM 節(jié)點本身暴露給 DOM 組件。

那時，React 開始獲得廣泛認可，并被一些大型企業(yè)使用，如 Netflix 和 Airbnb。

2016：成為主流

2016 年 4 月，React 從版本 0.14.7 切換到主要穩(wěn)定版本：React v15.0[7]。這展示了對穩(wěn)定性的承諾以及在次要版本中引入新的向后兼容功能的能力以及 React 向前發(fā)展的持續(xù)進步. 該版本中的一些重大變化改進了我們與 DOM 交互的方式：

掛載組件時使用document.createElement而不是設置innerHTML，這在現(xiàn)代瀏覽器中速度更快，并且它也修復了一些邊緣情況。函數(shù)組件可以返回null。改進了對 SVG 的支持，添加了對當今瀏覽器可識別的所有 SVG 屬性的支持。

為了使生產(chǎn)環(huán)境下的調(diào)試更加容易，在推出的 15.2.0 中引入了錯誤代碼系統(tǒng)，React 團隊開發(fā)了一個腳本來收集所有的不變錯誤消息并將它們放在一個 JSON 文件中，并且在構(gòu)建時 Babel 使用 JSON 重寫在生產(chǎn)中的不變調(diào)用以引用相應的錯誤 ID。當生產(chǎn)出現(xiàn)問題時，React 拋出的錯誤將包含一個帶有錯誤 ID 和相關(guān)信息的 URL。該 URL 會將指向文檔中的一個頁面，在該頁面上重新組合了原始錯誤消息。

同年，React 通過新的會議（例如 React Europe）獲得了更多的認可。MobX 和 BlueprintJS 等新庫的發(fā)布受到了開發(fā)社區(qū)的高度贊賞。

2017：React Fiber 發(fā)布

React v16.0[8]于 2017 年 9 月發(fā)布，其中包含多項更改和新功能，其中包括：

通過引入 Error Boundaries 改進了錯誤處理，Error Boundaries 是特殊的 React 組件，提供了一種干凈的方式來處理其子組件中的錯誤，記錄這些錯誤并在其位置顯示回退 UI。允許從組件的渲染方法返回多個元素，例如數(shù)組和字符串。改進了服務端渲染，比 React 15 快大約三倍。推出全新的 React Fiber 架構(gòu)，一套新的內(nèi)部渲染算法。React Fiber 成為 React 工具庫未來任何改進和功能開發(fā)的基礎。2019：React Hooks 發(fā)布

React v16.8[9]于 2019 年 2 月發(fā)布，正式推出 React Hooks，Hooks 讓我們無需編寫類就可以使用狀態(tài)和其他 React 特性。還可以構(gòu)建自己的 Hooks以在組件之間共享可重用的有狀態(tài)邏輯。

import React, { useState } from "react";function Example() {  const [count, setCount] = useState(0);  return (    
      
You clicked {count} times
       setCount(count + 1)}>        Click me          
  );}

同年，React 團隊推出了全新的React DevTools，其可以在 Chrome、Firefox 和 (Chromium) Edge 中使用！此版本發(fā)生了很多變化！提供了顯著的性能提升和改進的導航體驗。它還為 React Hooks 提供全面支持，包括檢查嵌套對象。

2020：更新更簡單

React v17.0[10]于 2020 年 10 月發(fā)布，距離上一個主要版本已經(jīng)過去了兩年半的時間。此版本主要側(cè)重于使從以前的版本更新 React 本身變得更簡單，不包含任何面向開發(fā)人員的新功能。在此版本之前，從 React 的早期版本升級到新版本需要一次升級整個應用。React 17 提供了一次升級整個應用或按認為合適的方式逐個升級應用的選項。

同年，React 引入了零捆綁大小的 React 服務端組件[11]，以獲取 React 開發(fā)社區(qū)的初步反饋。

2022至今：持續(xù)改進

React v18.0[12]于 2022 年 3 月發(fā)布，這個主要版本包括開箱即用的改進，例如自動批處理、新 API（例如 startTransition）以及支持 Suspense 的流式服務端渲染。React 18 中的許多功能都建立在新的并發(fā)渲染器之上，這是一個解鎖強大新功能的幕后變化。

2022 年 6 月，React Labs 公布正在研究的方向：

React Server Components (RSC)優(yōu)化資源加載靜態(tài)服務端渲染優(yōu)化React 優(yōu)化編譯器離屏渲染過渡跟蹤新的 React 文檔

2023 年 3 月，React 推出全新的官方文檔：react.dev[13]。

使用函數(shù)組件和 Hooks 教授現(xiàn)代 React；提供了圖表、插圖、挑戰(zhàn)和 600 多個新的交互式示例。

2023 年 3 月，React Labs 公布正在研究的方向：

React Server Components（RSC）資源加載優(yōu)化文檔元數(shù)據(jù)優(yōu)化React 優(yōu)化編譯器離屏渲染過渡跟蹤

2023 年 5 月，React 推出一個新的官方支持的Canary 發(fā)布渠道[14]。它讓諸如框架之類的精心策劃的設置將個別 React 功能的采用與 React 發(fā)布計劃分離開來。讓開發(fā)者在設計接近最終版本時立即采用個別新功能，然后再以穩(wěn)定版本發(fā)布——類似于 Meta 長期以來在內(nèi)部使用新版本的 React 的方式。

未來

距離 React 上一次版本更新（最新版本為 v18.2）已經(jīng)過去了近一年。React v19.0 還在開發(fā)中（當前進度 45%），期待更多實用的功能出現(xiàn)在 React 中！

相關(guān)鏈接

[1]FaxJS:https://github.com/jordwalke/FaxJs

[2]React Developer Tools:https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html

[3]React Hot Loader:https://github.com/gaearon/react-hot-loader

[4]React v0.13:https://reactjs.org/blog/2015/03/10/react-v0.13.html

[5]Redux:https://redux.js.org/

[6]React v0.14:https://reactjs.org/blog/2015/10/07/react-v0.14.html

[7]React v15.0:https://reactjs.org/blog/2016/04/07/react-v15.html

[8]React v16.0:https://reactjs.org/blog/2017/09/26/react-v16.0.html

[9]React v16.8:https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html

[10]React v17.0:https://reactjs.org/blog/2020/10/20/react-v17.html

[11]零捆綁大小的 React 服務端組件:https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

[12]React v18.0:https://legacy.reactjs.org/blog/2022/03/29/react-v18.html

[13]react.dev:https://react.dev/

[14]Canary 發(fā)布渠道:https://zh-hans.react.dev/community/versioning-policy#canary-channel

關(guān)鍵詞：