React

React

原作者	Jordan Walke
開發者	Facebook、Instagram及社区
首次发布	2013年3月​（2013-03）
当前版本	19.0.0（2024年12月5日，5個月前）
源代码库	github.com/facebook/react
编程语言	JavaScript
平台	跨平台
文件大小	145 KiB生产版 726 KiB开发版
类型	JavaScript函式庫
许可协议	MIT許可證
网站	ar.reactjs.org/

React（也稱為 React.js 或 ReactJS）是一個免費的開放原始碼前端 JavaScript工具庫， 用於基於 UI 組件構建用戶界面。

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

基本使用方法

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

import React from "react";

const Greeting = () => {
  return (
    <div className="hello_world">
      <h1> Hello, world! </h1>
    </div>
  );
};

export default Greeting;

Greeting 函數是一個 React 組件，它顯示著名的介紹性“Hello, world”。

在網Ａ瀏覽器中顯示時，結果將是以下內容的渲染：

<div class="hello_world">
  <h1>Hello, world!</h1>
</div>

值得關注的功能

宣告式語法

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

組件

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

import React from "react";
import Tool from "./Tool";
const Example = () => {
  return (
    <>
      <div className="app">
        <Tool name="Gulshan" />
      </div>
    </>
  );
};
  
export default Example;

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

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

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

函數組件

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

const Greeter = () => <div>Hello World</div>;

類別組件

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

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

類別組件都是關於類別的使用和生命週期方法的，而功能組件有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 代碼範例：

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

HTML 之外的架構

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

React hooks

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

React 提供了一些內建的Hooks，例如 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（页面存档备份，存于互联网档案馆）