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

2011：早期原型

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

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

2013：發(fā)布之年

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

2014：擴(kuò)張之年

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

2015：穩(wěn)定之年

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

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

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

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

2016：成為主流

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

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

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

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

2017：React Fiber 發(fā)布

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

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

2019：React Hooks 發(fā)布

React v16.8[9] 于 2019 年 2 月發(fā)布，正式推出 React Hooks，Hooks 讓我們無(wú)需編寫(xiě)類(lèi)就可以使用狀態(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 提供全面支持，包括檢查嵌套對(duì)象。

2020：更新更簡(jiǎn)單

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

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

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

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

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

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

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

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

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

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

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

未來(lái)

距離 React 上一次版本更新（最新版本為 v18.2）已經(jīng)過(guò)去了近一年。React v19.0 還在開(kāi)發(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