🔧 阿川の電商水電行
前言
你好，我是渡邊仁（@Sicut_study）。
我平時發佈很多關於React的教程，並且思考了一個問題。
「學習React的時候不如從歷史中學習更好嗎？」
於是我在網上查詢React的歷史，發現它如今在AI熱潮中掌握了霸權，但在發布初期卻並不受到開發者的喜愛，這是一段不光彩的過去。
隨著調查的深入，我了解到React展開了一場如同電影般的反轉劇。
這次我要介紹的就是 React如何掌握霸權的歷史。
我們也製作了投入不少心力的視頻，希望你能去觀看！！
↓↓↓
React掌握霸權的故事
如今，我們理所當然地使用React，許多日常使用的服務，如Instagram、Netflix、Airbnb等，都是基於React構建的。
然而，當React於2013年5月在JSConf US上首次公布時，卻遭到了開發者社群的激烈批評。
「這是一大退步！」
「這樣的代碼誰會寫？」
那麼，為什麼一開始被討厭的React，現在卻成為最受歡迎的JavaScript函式庫之一呢？
目錄
- React誕生之前 - 2010-2011年的網頁開發
- FaxJS的誕生 - Jordan Walke的實驗
- JSConf US 2013 - 爆紅的發布
- Pete Hunt的反擊 - 重新思考最佳實踐
- BSD+專利授權問題 - 2016-2017年的危機
- React Hooks的出現 - 2019年的革命
- 現代的React - 框架時代
- 總結
1. React誕生之前 - 2010-2011年的網頁開發
2010年到2011年之間，網頁開發處於混亂之中。
當時最受歡迎的工具是jQuery，它簡化了DOM操作，解決了瀏覽器間的兼容性問題。
然而，jQuery有一個重大缺陷。
應用程式的狀態(state)會分散在DOM中，隨著代碼變得越來越複雜，維護變得困難。
開發者們稱這一現象為「jQuery疲勞」。
為了解決這個問題，Backbone.js應運而生。
Backbone引入了MVC模式，改善了狀態管理，但自由度太高，對初學者來說仍然是個難以掌握的工具。
另一方面，AngularJS則作為「全能型」框架推出，提供雙向數據綁定等強大功能，但當應用程式變得大型時，性能問題明顯浮現。
2. FaxJS的誕生 - Jordan Walke的實驗
在2010年左右，Facebook快速成長。
特別是新聞動態和廣告系統的UI日益複雜，管理達到了極限。
Facebook已經在使用名為XHP的PHP擴展。
XHP允許在PHP中寫入HTML風格的語法，並構建可重複使用的組件化UI。
Facebook內部工程師Jordan Walke思考是否能將XHP的理念帶入JavaScript，他開始了一個實驗性項目FaxJS。官方博客「Our First 50,000 Stars」中提到，FaxJS創造了許多成為React基礎概念的元素：
props: 將外部信息傳遞給組件的機制
state: 組件內部保持的數據
差異檢測(diff): 高效檢測變更的機制
伺服器端渲染: 在伺服器端生成HTML
在2012年3月，Jordan將這個函式庫導入Facebook的代碼基礎中，並命名為FBolt。
隨後在2011年，這一技術首次在Facebook的新聞動態中投入實際應用。
Jordan Walke: "我想補充一句，許多系統宣稱擁有某種反應性，但通常需要你設置某種點對點的監聽器，並且無法在結構化數據上運行。這個API對任何狀態或屬性變更都能反應，適用於任何形式的數據（如圖形本身那樣深度結構化），因此我認為這個名字是合適的。"
出處: Our First 50,000 Stars - React Blog
因此，FBolt被命名為「React」。
React最具創新性的理念是 虛擬DOM(Virtual DOM)。
傳統的方法需要在更新UI的某些部分時，詳細指定「要變更哪些部分」。然而，Jordan提出了一種表面上看似低效的方法，即「每當數據變更時，重新渲染整個UI」。
虛擬DOM在記憶體中保留了實際DOM的輕量副本。
當數據發生變更時，React會進行以下步驟：
- 創建新的虛擬DOM樹
- 將新舊虛擬DOM進行比較(diffing)
- 只將變更的部分反映到實際DOM中
這使得開發者只需以聲明式的方式描述「UI應該是怎樣的」，並且優化了性能。
3. JSConf US 2013 - 爆紅的發布
歷史性的發表
2013年5月29日，在JSConf US上，Tom Occhino和Jordan Walke公佈了React。
然而，會場的反應卻很冷淡。RisingStack的時間線提到：
「觀眾們持懷疑態度。大多數人認為React是一大步退步。」
最受批評的正是JSX。
JSX允許在JavaScript中寫入HTML風格的語法。
function LikeButton() {
return <button>Hello World!</button>;
}傳統網頁開發有著「HTML和JavaScript應該分開」的原則，這是一條絕對的規則。這個原則被稱為「關心事物的分離（Separation of Concerns）」，數十年來被奉為設計思想。
React卻直接反駁了這一常識。
當時開發者們的反應是：
「把HTML和JavaScript混合在一起，簡直回到1999年！」
「這樣的代碼誰會寫？」
「這是一大退步！」
4. Pete Hunt的反擊 - 重新思考最佳實踐
2012年，Facebook收購了Instagram。
工程師Pete Hunt加入了Instagram團隊，制定了一個大膽的計劃，即「用React完全重建Instagram的網站」。
實現這個計劃，需要將React從Facebook專用技術變成開源。
這個項目成為React開源化的動力。
2013年9月14-15日，在JSConfEU上，Pete Hunt進行了一場傳奇性的演講「重新思考最佳實踐」。
Pete的主張很明確：
「將HTML和JavaScript分開是『技術上的分離』，而不是『關心事物的分離』。」
他提供了一個具體的例子。
傳統的分法（技術分開）
index.html → 只有HTML
style.css → 只有CSS
script.js → 只有JavaScript要修正「喜歡按鈕」，需要修改這三個文件，相關代碼是分散的。
React的分法（意義上分開）
LikeButton.jsx → 所有關於喜歡按鈕的內容
CommentBox.jsx → 所有關於評論的內容
UserProfile.jsx → 所有關於用戶資料的內容相關的內容都集中在一個地方。這才是真正的「關心事物的分離」，Pete這麼主張。
實際演示後，開發者的反應開始轉變，他們看到原本需要寫10行、20行的代碼，現在只需幾行。
感受到成效的React團隊開始在全球舉辦活動，讓開發者們實際使用React。RisingStack的文章中提到：
「React的創建者們及時認識到這個錯誤，決定以後啟動『React巡演』，把反對者變成支持者。」
出處: The History of React.js on a Timeline - RisingStack
通過這些努力，漸漸增加了理解者的數量。
5. BSD+專利授權問題 - 2016-2017年的危機
隨著React人氣上升，2016年至2017年間出現了嚴重的問題。
那就是BSD+專利授權。
這個授權包含以下條款：
「如果您（或您的任何子公司、企業關聯或代理）直接或間接地開始，或對Facebook提起任何專利主張，該授權將自動終止，且無需通知......」
（簡單來說，即「使用React的企業若起訴Facebook專利侵權，將立即失去使用React的權利」。）
2017年7月，Apache Software Foundation將這一授權歸類為「Category X」，實際上禁止在Apache項目中使用。
2017年8月，WordPress創辦人Matt Mullenweg宣佈在新的編輯器Gutenberg中停止使用React。
當時，WordPress被廣泛應用於全球數以百萬計的網站，這對React而言是一大打擊。
開發者社群一片哗然：
「Facebook在濫用開源！」
「快逃離React！」
「應該轉向Vue.js或Angular！」
Facebook陷入了危機。2017年9月23日，Adam Wolff在官方博客上發表了聲明：
「我們決定將我們的開源項目React、Jest、Flow和Immutable.js重新授權為MIT授權。」
出處: Relicensing React, Jest, Flow, and Immutable.js
MIT授權是當今最簡單且限制最少的授權之一。
這一決定使得React恢復了信任，甚至給人留下了「真誠聽取社群聲音」的良好印象。
6. React Hooks的出現 - 2019年的革命
到2018年為止，React已成為行業標準。但開發者們面臨新的挑戰。
React有兩種類型的組件：
類組件
- 能夠持有state
- 可以使用生命週期方法
- 但寫法複雜，對初學者來說難度較高
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <div>{this.state.count}</div>;
}
}函數組件
- 寫法簡單
- 無法持有state（無狀態）
2019年2月6日，React 16.8正式發布，Hooks被引入。
React v16.8: The One With Hooks
使用Hooks後，函數組件也能持有state：
function Counter() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}- useState: 狀態管理
- useEffect: 副作用（如數據獲取）的處理
- useContext: 上下文的使用
- useReducer: 複雜的狀態管理
官方文檔詳細說明了引入Hooks的理由：
「Hooks是讓你能從函數組件「鉤住」React狀態和生命週期功能的函數。」
Hooks進一步革新了React的使用方式。
7. 現代的React - 框架時代
從2014年到2020年，React主要用於構建SPA（單頁應用程式）。
然而SPA存在以下問題：
- 初始加載慢：必須最初加載所有JavaScript
- SEO弱點：搜索引擎難以讀取內容
解決這些問題的框架有Next.js和Remix等。
- SSR（伺服器端渲染）：伺服器端生成HTML
- SSG（靜態站點生成）：在建構時生成HTML
- ISR（增量靜態再生）：靜態生成和SSR的混合
- 自動代碼切割和路由
自2016年推出以來，Next.js成為React生態系統的事實上的標準。
現在越來越多的開發者認為「使用React = 使用Next.js」，React已從單純的函式庫演變為整個生態系統。
8. 總結
從React的歷史中，我們可以學到許多東西。
1. 創新始於批評
即便最初不被理解，但只要是真正優秀的東西，總有一天會被認可。
2. 與社群對話的重要性
正如授權問題所示，傾聽社群的聲音並靈活應對，會建立起信任。
3. 挑戰常識的勇氣
正因挑戰了「關心事物的分離」這一長期存在的常識，才開啟了新的世界。
4. 持續進化
React正不斷演進，如Hooks或Server Components等。
結語
你覺得如何？
React並不是一開始就成功的函式庫，其背後有著驚人的故事。了解歷史後或許會讓你更喜愛React！
我也釋出了深入講解的視頻，希望你能去看看！
JISOU的成員募集中！
在程式設計指導工作室JISOU，我們正在招募新成員。
在日本最棒的輸出型社群中提升你的職業生涯，不妨考慮加入我們！
有興趣的朋友，請隨時從官網申請諮詢！
▼▼▼
已經發佈了許多圖解演示！
原文出處：https://qiita.com/Sicut_study/items/ab4d6ba9da63d71a6c50
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
