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

2011：早期原型

2011 年，Facebook 工程師 Jordan Walke 創建了 FaxJS[1]，它是 React 的早期原型，幾個月后，Facebook 的團隊使用完全由 React 和 Flux 提供支持的版本構建了點贊和評論功能。

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

2013：發布之年

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

2014：擴張之年

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

2015：穩定之年

在 2015 年 1 月的 React.js 大會上的技術演講中，Facebook 發布了 React Native 的第一個版本，可以輕松進行 Android 和 iOS 開發。

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

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

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

2016：成為主流

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

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

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

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

2017：React Fiber 發布

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

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

2019：React Hooks 發布

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

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

2020：更新更簡單

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

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

2022至今：持續改進

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

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

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

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

• 使用函數組件和 Hooks 教授現代 React；
• 提供了圖表、插圖、挑戰和 600 多個新的交互式示例。

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

• React Server Components（RSC）
• 資源加載優化
• 文檔元數據優化
• React 優化編譯器
• 離屏渲染
• 過渡跟蹤

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

未來

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

相關鏈接

[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 發布渠道: https://zh-hans.react.dev/community/versioning-policy#canary-channel