React

React是一個自由及開放原始碼的前端JavaScript工具庫， 用於基於UI元件構建使用者介面。它由Meta和由個人開發者和公司組成的社群維護。React可用作開發具有Next.js等框架的單頁、手機或伺服器渲染應用程式的基礎。然而，React只專注狀態管理和將狀態渲染到DOM，因此建立React應用程式通常需要使用額外的工具庫來進行路由實作，以及某些客戶端功能。基本使用方法.以下是使用JSX和JavaScript在HTML中使用React的基本範例。import React from "react";const Greeting = () =&gt; {return (};export default Greeting;Greeting函式是一個React元件，渲染的結果為“Hello, world”。在網頁瀏覽器中顯示時，結果將是以下內容的渲染：功能.宣告式語法.React採取宣告式程式撰寫正規化。開發人員為應用程式的每個狀態設計檢視，React會在資料更改時更新和呈現元件。這與命令式程式撰寫不同。元件.React程式碼由稱為元件的實體組成。這些元件是可重複利用的，並且必須遵循大寫駝峰命名法在src資料夾中形成。可以使用React DOM工具庫將元件渲染到DOM中的特定元素。渲染元件時，可以透過“props”在元件之間傳遞引數值：import React from "react";import Tool from "./Tool";const Example = () =&gt; {return ();export default Example;在上面的範例中，值為“Gulshan”的name屬性已從codice_1元件傳遞到codice_2元件。此外，codice_3部分被包裝在一個名為codice_3的標籤中，因為只能返回一個值。所以所有JSX元素和元件都繫結到一個標籤中。在React中宣告元件的兩種主要方式是透過函式元件和基於類別元件。函式元件.函式元件用一個函式宣告，然後返回一些JSX。const Greeter = () =&gt; ;類別元件.基於類的元件是使用ES6類別宣告。class ParentComponent extends React.Component {state = { color: 'green' };render() {return (類別元件都是關於類別的使用和生命週期方法的，而功能元件有Hooks來處理在React中編寫程式碼時出現的狀態管理和其他問題。虛擬DOM.另一個值得注意的特性是使用虛擬檔案物件模型或虛擬DOM。React建立一個記憶體資料結構暫存，計算結果差異，然後有效地更新瀏覽器顯示的DOM。這個過程稱為reconciliation。這允許程式工程師撰寫程式碼，就好像每次更改都會渲染整個頁面，而React只渲染實際更改的子元件。這種選擇性渲染提供了主要的效能提升。節省了重新計算CSS樣式、頁面排版和渲染整個頁面的工作量。生命週期方法.基於類別元件的生命週期方法使用一種掛鉤形式，允許在元件生命週期內的設定點執行程式碼。JSX.JSX或JavaScript語法擴充，是JavaScript語言語法的擴充。 在外表上與HTML類似，JSX提供了一種使用許多開發人員熟悉的語法來構建元件渲染的方法。React元件通常使用JSX撰寫，儘管它們並非必須如此。JSX類似於Facebook為PHP建立的另一個擴充套件語法，稱為XHP。JSX程式碼範例：class App extends React.Component {render() {return (巢狀的元素.同一層級上的多個元素需要包裝在一個React元素中。例如上面程式碼中，codice_11 被包裹在 codice_11 元素中。否則需要由 codice_13 或其簡寫形式 codice_14 包圍，或作為陣列返回。HTML之外的架構.React的基本架構不僅適用於在瀏覽器中呈現HTML。例如，Facebook有渲染到codice_15標籤， Netflix 和 PayPal 使用通用載入於伺服器和客戶端上渲染相同的HTML。React hooks.Hooks是讓開發人員從函式元件中“鉤入”React狀態和生命週期特性的函式。Hooks在類別元件無法作用——它們讓你在沒用類別元件情況下使用React。React提供了一些內建的Hook，例如 codice_16,codice_17、codice_18、codice_19 與codice_20。 其他的記錄在Hooks API參考中。 codice_16 與codice_20，也就是最常用，分別用於狀態和副作用的控制。Hooks的使用規範.下面有一些Hooks規範 描述了鉤子的特徵程式碼模式，也是現今使用React處理狀態方式。雖然這些規範不能在執行時強制執行，但可以設定程式碼分析工具來偵測開發過程中的許多錯誤。這些規範適用於Hooks的使用和自定義Hooks的實作， 也就是可能會呼叫其他Hooks。常用慣用語.React並不刻意提供一個完整的「應用程式工具庫」。專為構建使用者介面而設計，因此不包含一些開發人員可能認為構建應用程式所必需的許多工具。這也允許選擇開發人員喜歡的任何工具庫來完成諸如執行網路訪問或本地資料儲存等任務。隨著工具庫的成熟，常見的使用模式已經出現。單向資料流.為了支援React的單向資料流概念的操作，並且對儲存區的更改被傳遞回檢視。 當與React一起使用時，這種傳遞是透過元件屬性完成的。從Flux的概念開始，Flux就被Redux和MobX等工具庫所取代。Flux可以被認為是觀察者模式的一種變體。Flux架構下的React元件不應直接修改傳遞給它的任何props，而應傳遞回撥函式，這些回呼函式建立由排程程式傳送的用於修改儲存的操作。動作是一個物件，負責描述發生的事情：例如，描述一個使用者“關注”另一個使用者的動作可能包含使用者ID、目標使用者ID和型別codice_23。可以將儲存視為模型，可以根據從排程程式接收到的操作來改變自己。這種模式有時表示為“屬性向上流動”。Flux的許多實作從一開始就被建立了，也許最著名的是Redux，它具有單一儲存，通常稱為單一資料源。未來發展.可以透過核心團隊討論論壇追蹤專案狀態。 但是，對React的重大更改會透過React儲存庫的未來問題和拉取請求。 這使React社群能夠就新的潛在功能、實驗性API和JavaScript語法改進提供回饋。歷史.React由Facebook的軟體工程師Jordan Walke建立，他發布了一個名為“FaxJS”的React早期原型。 他受到XHP的影響。於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版本線。