React

**React**（也稱為 React.js 或 ReactJS）是一個自由及開放原始碼的前端 JavaScript 工具庫， 用於基於 UI 組件構建使用者介面。

它由 Meta（前身為 Facebook）和由個人開發者和公司組成的社群維護。
React 可用作開發具有 Next.js 等框架的單頁、手機或伺服器彩現應用程式的基礎。然而，React 只專注狀態管理和將狀態彩現到 DOM，因此建立 React 應用程式通常需要使用額外的工具庫來進行路由實作，以及某些客戶端功能。

## 基本使用方法

以下是使用 JSX 和 JavaScript 在 HTML 中使用 React 的基本範例。

Greeting 函式是一個 React 組件，彩現的結果為「Hello, world」。

在網頁瀏覽器中顯示時，結果將是以下內容的彩現：

## 功能

### 宣告式語法

React 採取宣告式程式撰寫範式。開發人員為應用程式的每個狀態設計視圖，React 會在資料更改時更新和呈現組件。這與命令式程式撰寫不同。

### 組件

React 程式碼由稱為組件的實體組成。這些組件是可重複利用的，並且必須遵循大寫駝峰命名法（Pascal Case）作為其命名規則，也就是大寫版本的駝峰式命名法（camelCase）在 src 資料夾中形成。可以使用 React DOM 工具庫將組件彩現到 DOM 中的特定元素。彩現組件時，可以通過「props」在組件之間傳遞參數值：

在上面的範例中，值為「Gulshan」的 name 屬性已從 `Example` 組件傳遞到 `Tool` 組件。

此外，`return` 部分被包裝在一個名為 `return` 的標籤中，因為只能返回一個值。所以所有 JSX 元素和組件都綁定到一個標籤中。

在 React 中宣告組件的兩種主要方式是通過函式組件和基於類別組件。

### 函式組件

函式組件用一個函式聲明，然後返回一些 JSX。

### 類別組件

基於類的組件是使用 ES6 類別宣告。

類別組件都是關於類別的使用和生命週期方法的，而功能組件有 Hooks 來處理在 React 中編寫代碼時出現的狀態管理和其他問題。

### 虛擬 DOM

另一個值得注意的特性是使用虛擬文件物件模型或虛擬 DOM。React 建立一個記憶體資料結構暫存，計算結果差異，然後有效地更新瀏覽器顯示的 DOM。這個過程稱為 reconciliation。這允許程式工程師撰寫程式碼，就好像每次更改都會彩現整個頁面，而 React 只彩現實際更改的子組件。這種選擇性彩現提供了主要的效能提升。節省了重新計算 CSS 樣式、頁面排版和彩現整個頁面的工作量。

### 生命週期方法

基於類別組件的生命週期方法使用一種掛鉤（Hooking）形式，允許在組件生命週期內的設定點執行程式碼。

* `shouldComponentUpdate` 允許開發人員通過在不需要彩現時返回 false 來防止不必要的組件重新彩現。
* `componentDidMount` 只要一旦組件「掛載（mounted）」（組件已在使用者介面中建立，通常通過將其與 DOM 節點關聯），就會被呼叫。這通常用於通過 API 觸發從遠端資料來源載入資料。
* `componentWillUnmount` 在組件被移除或「解除安裝」（unmounted）之前立即被呼叫。通常用於清除對組件的資源需求相依性模組，這相依性模組不會隨著組件的解除安裝而容易地被刪除（例如，刪除與組件相關的任何 `setInterval()` ，或設定於「檔案」的「事件監聽」（`eventListener`），因為組件的存在）。
* `render` 是最重要的生命週期方法，也是任何組件中唯一需要的方法。它通常在每次組件狀態更新時呼叫，也就是應該反映在使用者介面中。

### JSX

JSX 或 JavaScript 語法擴充，是 JavaScript 語言語法的擴充。 在外表上與 HTML 類似，JSX 提供了一種使用許多開發人員熟悉的語法來構建組件彩現的方法。React 組件通常使用 JSX 撰寫，儘管它們並非必須如此（組件也可以使用純 JavaScript 撰寫）。JSX 類似於 Facebook 為 PHP 建立的另一個擴展語法，稱為 XHP。

JSX 代碼範例：

### HTML 之外的架構

React 的基本架構不僅適用於在瀏覽器中呈現 HTML。例如，Facebook 有彩現到 `<canvas>` 標籤， Netflix 和 PayPal 使用通用載入於伺服器和客戶端上彩現相同的 HTML。

### React hooks

Hooks 是讓開發人員從函式組件中「鉤入（Hook into）」React 狀態和生命週期特性的函式。Hooks 在類別組件無法作用 —— 它們讓你在沒用類別組件情況下使用 React。

React 提供了一些內建的 Hook，例如 `useState`,`useContext`、`useReducer`、`useMemo` 與 `useEffect`。 其他的記錄在 Hooks API 參考中。 `useState` 與 `useEffect`，也就是最常用，分別用於狀態和副作用的控制。

#### Hooks 的使用規範

下面有一些 Hooks 規範 描述了鉤子（Hooks）的特徵程式碼模式，也是現今使用 React 處理狀態方式。

1. Hooks 只能在頂層呼叫（而不是在迴圈或 if 語句內）。
2. Hooks 只能從 React 函式組件和自訂 Hooks 呼叫，而不是普通函式或類別組件。

雖然這些規範不能在執行時強制執行，但可以設定程式碼分析工具（例如 linter）來偵測開發過程中的許多錯誤。

這些規範適用於 Hooks 的使用和自訂 Hooks 的實作， 也就是可能會調用其他 Hooks。

## 常用慣用語

React 並不刻意提供一個完整的「應用程式工具庫」。專為構建使用者介面而設計，因此不包含一些開發人員可能認為構建應用程式所必需的許多工具。這也允許選擇開發人員喜歡的任何工具庫來完成諸如執行網路存取或本地資料儲存等任務。隨著工具庫的成熟，常見的使用模式已經出現。

### 單向資料流

為了支援 React 的單向資料流概念（可能與 AngularJS 的雙向資料流形成對比），Flux 架構被開發為流行的模型 - 視圖 - 控制器架構的替代方案。Flux 具有通過中央調度程式發送到儲存區（Store）的操作，並且對儲存區的更改被傳遞回視圖。 當與 React 一起使用時，這種傳遞是通過組件屬性完成的。從 Flux 的概念開始，Flux 就被 Redux 和 MobX 等工具庫所取代。

Flux 可以被認為是觀察者模式的一種變體。

Flux 架構下的 React 組件不應直接修改傳遞給它的任何 props，而應傳遞回調函式，這些回呼函式建立由調度程式發送的用於修改儲存的操作。動作（Action）是一個物件，負責描述發生的事情：例如，描述一個使用者「關注」另一個使用者的動作可能包含使用者 ID、目標使用者 ID 和類型 `USER_FOLLOWED_ANOTHER_USER`。可以將儲存視為模型，可以根據從調度程式接收到的操作來改變自己。

這種模式有時表示為「屬性（Properties）向下流動，動作（Actions）向上流動」。Flux 的許多實作從一開始就被建立了，也許最著名的是 Redux，它具有單一儲存，通常稱為單一資料源。

## 未來發展

可以通過核心團隊討論論壇追蹤專案狀態。 但是，對 React 的重大更改會通過 React 儲存庫的未來問題和拉取請求（Pull request）。 這使 React 社群能夠就新的潛在功能、實驗性 API 和 JavaScript 語法改進提供回饋。

## 歷史

React 由 Facebook 的軟體工程師 Jordan Walke 建立，他發布了一個名為「FaxJS」的 React 早期原型。 他受到 XHP（一個 PHP 的 HTML 組件庫）的影響。於 2011 年首次部署在 Facebook 的 News Feed 上，隨後於 2012 年部署在 Instagram 上。 於 2013 年 5 月在 JSConf US 宣布開放原始碼。

React Native 於 2015 年 2 月在 Facebook 的 React Conf 上宣布，並於 2015 年 3 月開放原始碼，支援使用 React 進行原生 Android、iOS 和 UWP 開發。

2017 年 4 月 18 日，Facebook 發布了 React Fiber，這是一套新的內部彩現演算法，與 React 的舊彩現演算法 Stack 不同。React Fiber 將成為 React 工具庫未來任何改進和功能開發的基礎。 使用 React 程式撰寫的實際語法不會改變；只有語法的執行方式發生了變化。 React 的舊彩現系統 Stack 是在不了解系統對動態變化的關注點的時候開發的。Stack 繪製複雜動畫的速度很緩慢，例如，試圖在一個塊中完成所有動畫。Fiber 將動畫分解為可以分佈在多個影格上的片段。同樣，一個頁面的結構可以分解為可以單獨維護和更新的片段。JavaScript 函式和虛擬 DOM 對像被稱為「纖程」，每個都可以單獨操作和更新，從而實現更流暢的螢幕彩現。

2017 年 9 月 26 日，React 16.0 向公眾發布。

2019 年 2 月 16 日，React 16.8 向公眾發布。 該版本匯入了 React Hooks。

2020 年 8 月 10 日，React 團隊宣布了 React v17.0 的第一個候選版本，值得關注的是第一個主要版本沒有對面向 React 開發人員的 API 進行重大更改。

## 授權

2013 年 5 月 React 的首次公開發布使用了 Apache License 2.0。2014 年 10 月，React 0.12.0 將其更換為 3 言條款 BSD 授權條欺，並新增了一個單獨的專利授權檔案，允許使用與該軟體相關的任何 Facebook 專利：

> The license granted hereunder will terminate, automatically and without notice, for anyone that makes any claim (including by filing any lawsuit, assertion or other action) alleging (a) direct, indirect, or contributory infringement or inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, (ii) by any party if such claim arises in whole or in part from any software, product or service of Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, or (iii) by any party relating to the Software; or (b) that any right in any patent claim of Facebook is invalid or unenforceable.
> 
> 

這個不同以往的條款在 React 使用者社群引起了一些爭議和爭論，因為可以被解釋為授權 Facebook 在許多情況下復原授權，例如，如果 Facebook 起訴被授權人通過發布動作來提示他們採取「其他行動」在部落格或其他地方。許多人擔心 Facebook 可能會不公平地利用終止條款，或者將 React 整合到產品中可能會使新創公司未來的收購變得複雜。

根據社群回饋，Facebook 於 2015 年 4 月更新了專利授權，以減少歧義並更加寬容：

> The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the Software. [...] A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim.
> 
> 

Apache 軟體基金會認為這種授權條款安排與其授權政策不相容，因為它「將風險轉嫁給我們軟體的下游消費者，而不是有利於權利擁有者，而不是權利被被授權者，從而違反了我們作為通用捐助者的 Apache 法律政策」和「不是 [Apache 授權 2.0] 中的子集，它們不能作為 [Apache 授權 2.0] 再授權」。 2017 年 8 月，Facebook 駁回了 Apache 基金會對下游的擔憂，並拒絕重新考慮他們的授權條款。 接下來的一個月，WordPress 決定將其 Gutenberg 和 Calypso 專案從 React 中移除。

2017 年 9 月 23 日，Facebook 宣布下週將根據標準 MIT 授權條款重新授權 Flow、Jest、React 和 Immutable.js；該公司表示，React 是「網路開放原始碼軟體廣泛生態系統的基礎」，他們不想「因為非技術原因阻礙進展」。

2017 年 9 月 26 日，React 16.0.0 以 MIT 授權條款發布。 MIT 授權條款更改也已通過 React 15.6.2 向後移植到 15.x 版本線。

## 參見

* Vue.js
* AngularJS

## 參考資料

## 外部連結

* 官方網站
* Reactjs Example（頁面存檔備份，存於網際網路檔案館）