React（也稱為 Reactjs 或 ReactJS）是一個自由及開放原始碼的前端 JavaScript 工具庫， 用於基於 UI 元件構建使用者介面。 它由 Meta（前身為 Facebook）和由個人開發者和公司組成的社群維護。 React 可用作開發具有 Nextjs 等框架的單頁、手機或伺服器渲染應用程式的基礎。然而，React 只專注狀態管理和將狀態渲染到 DOM，因此建立 React 應用程式通常需要使用額外的工具庫來進行路由實作，以及某些客戶端功能。 基本使用方法 以下是使用 JSX 和 JavaScript 在 HTML 中使用 React 的基本範例。 import React from react const Greeting return Hello world export default Greeting Greeting 函式是一個 React 元件，渲染的結果為 Hello world。 在網頁瀏覽器中顯示時，結果將是以下內容的渲染： Hello world 功能 宣告式語法 React 採取宣告式程式撰寫正規化。開發人員為應用程式的每個狀態設計檢視，React 會在資料更改時更新和呈現元件。這與命令式程式撰寫不同。 元件 React 程式碼由稱為元件的實體組成。這些元件是可重複利用的，並且必須遵循大寫駝峰命名法（Pascal Case）作為其命名規則，也就是大寫版本的駝峰式命名法（camelCase）在 src 資料夾中形成。可以使用 React DOM 工具庫將元件渲染到 DOM 中的特定元素。渲染元件時，可以透過 props 在元件之間傳遞引數值： import React from react import Tool from Tool const Example return Tool nameGulshan export default Example 在上面的範例中，值為 Gulshan 的 name 屬性已從 Example 元件傳遞到 Tool 元件。 此外，return 部分被包裝在一個名為 return 的標籤中，因為只能返回一個值。所以所有 JSX 元素和元件都繫結到一個標籤中。 在 React 中宣告元件的兩種主要方式是透過函式元件和基於類別元件。 函式元件 函式元件用一個函式宣告，然後返回一些 JSX。 const Greeter Hello World 類別元件 基於類的元件使用 ES6 類別宣告。 class ParentComponent extends ReactComponent state color green render return ChildComponent colorthisstatecolor 類別元件都是關於類別的使用和生命週期方法的，而功能元件有 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 ReactComponent render return Header Content Footer 巢狀的元素 同一層級上的多個元素需要包裝在一個 React 元素中。例如上面程式碼中， 被包裹在 元素中。否則需要由 Fragment 或其簡寫形式 包圍，或作為陣列返回。 HTML 之外的架構 React 的基本架構不僅適用於在瀏覽器中呈現 HTML。例如，Facebook 有渲染到 canvas 標籤， Netflix 和 PayPal 使用通用載入於伺服器和客戶端上渲染相同的 HTML。 React hooks Hooks 是讓開發人員從函式元件中 鉤入（Hook into）React 狀態和生命週期特性的函式。Hooks 在類別元件無法作用 它們讓你在沒用類別元件情況下使用 React。 React 提供了一些內建的 Hook，例如 useStateuseContext、useReducer、useMemo 與 useEffect。 其他的記錄在 Hooks API 參考中。 useState 與 useEffect，也就是最常用，分別用於狀態和副作用的控制。 Hooks 的使用規範 下面有一些 Hooks 規範 描述了鉤子（Hooks）的特徵程式碼模式，也是現今使用 React 處理狀態方式。 Hooks 只能在頂層呼叫（而不是在迴圈或 if 語句內）。 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 160 向公眾發布。 2019 年 2 月 16 日，React 168 向公眾發布。 該版本匯入了 React Hooks。 2020 年 8 月 10 日，React 團隊宣佈了 React v170 的第一個候選版本，值得關注的是第一個主要版本沒有對面向 React 開發人員的 API 進行重大更改。urlhttpsreactjsorgblog20200810reactv17rchtml 授權 2013 年 5 月 React 的首次公開發布使用了 Apache License 20。2014 年 10 月，React 0120 將其更換為 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 crossclaim or counterclaim Apache 軟體基金會認為這種授權條款安排與其授權政策不相容，因為它 將風險轉嫁給我們軟體的下游消費者，而不是有利於權利擁有者，而不是權利被被授權者，從而違反了我們作為通用捐助者的 Apache 法律政策 和 不是 Apache 授權 20 中的子集，它們不能作為 Apache 授權 20 再授權。 2017 年 8 月，Facebook 駁回了 Apache 基金會對下游的擔憂，並拒絕重新考慮他們的授權條款。 接下來的一個月，WordPress 決定將其 Gutenberg 和 Calypso 專案從 React 中移除。 2017 年 9 月 23 日，Facebook 宣佈下週將根據標準 MIT 授權條款重新授權 Flow、Jest、React 和 Immutablejs；該公司表示，React 是 網路開放原始碼軟體廣泛生態系統的基礎，他們不想 因為非技術原因阻礙進展。 2017 年 9 月 26 日，React 1600 以 MIT 授權條款發布。 MIT 授權條款更改也已透過 React 1562 向後移植到 15x 版本線。 參見 Vuejs AngularJS 參考資料 外部連結 Reactjs Example Category2015 年軟體 CategoryJavaScript 函式庫 CategoryFacebook 軟體 Category 使用 MIT 許可證的軟體