React

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

React

原作者	Jordan Walke
開發者	Meta開源及其社區
首次發布	2013年3月​（2013-03）
當前版本	18.3.1（2024年4月26日）
源代碼庫	github.com/facebook/react
編程語言	JavaScript
平台	跨平台
文件大小	145 KiB生產版 726 KiB開發版
類型	JavaScript函式庫
許可協議	MIT許可證
網站	https://react.dev/

它由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>
    );
  }
}

嵌套的元素

同一層級上的多個元素需要包裝在一個React元素中。例如上面代碼中，<p> 被包裹在 <div> 元素中。否則需要由 <Fragment> 或其簡寫形式 <> 包圍，或作為數組返回。

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（頁面存檔備份，存於網際網路檔案館）