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

2011：早期原型

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

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

2013：發(fā)布之年

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

2014：擴(kuò)張之年

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

2015：穩(wěn)定之年

在 2015 年 1 月的 React.js 大會上的技術(shù)演講中，F(xiàn)acebook 發(fā)布了 React Native 的第一個版本，可以輕松進(jìn)行 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é)點(diǎn)本身暴露給 DOM 組件。

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

2016：成為主流

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

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

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

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

2017：React Fiber 發(fā)布

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

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

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 (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

2020：更新更簡單

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

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

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

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

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

• React Server Components (RSC)
• 優(yōu)化資源加載
• 靜態(tài)服務(wù)端渲染優(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]。它讓諸如框架之類的精心策劃的設(shè)置將個別 React 功能的采用與 React 發(fā)布計(jì)劃分離開來。讓開發(fā)者在設(shè)計(jì)接近最終版本時立即采用個別新功能，然后再以穩(wěn)定版本發(fā)布——類似于 Meta 長期以來在內(nèi)部使用新版本的 React 的方式。

未來

距離 React 上一次版本更新（最新版本為 v18.2）已經(jīng)過去了近一年。React v19.0 還在開發(fā)中（當(dāng)前進(jìn)度 45%），期待更多實(shí)用的功能出現(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 服務(wù)端組件: 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