React.js，通常稱為 React，是一個強大的 JavaScript 函式庫，用於建立使用者介面，特別是單頁應用程式 (SPA)。它使開發人員能夠透過將複雜的 UI 分解為更小的、可重複使用的元件來創建複雜的 UI。要充分利用 React 的強大功能，了解其核心術語和功能非常重要。在本文中，我們將詳細介紹您在使用 React.js 時需要了解的一些關鍵概念、術語和功能。
函數元件是當今定義 React 元件最常見的方式。它們只是傳回表示 UI 的 JSX (JavaScript XML) 的 JavaScript 函數。函數元件也可以使用 React Hooks 來管理狀態和副作用。
function Greeting() {
return <h1>Hello, World!</h1>;
}
在引入 React Hooks 之前，類別元件是管理元件狀態和生命週期方法的主要方式。儘管它們仍然被廣泛使用，但帶有鉤子的函數組件現在是首選方法。
class Greeting extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
JSX 是 JavaScript 的語法擴展，可讓您直接在 JavaScript 中編寫類似 HTML 的程式碼。 React 使用 JSX 來描述 UI 應該是什麼樣子。儘管 JSX 看起來像 HTML，但它在底層被編譯成 JavaScript。
const element = <h1>Hello, JSX!</h1>;
您也可以將 JavaScript 表達式括在大括號中來將 JavaScript 表達式嵌入 JSX 中：
const name = "React";
const element = <h1>Hello, {name}!</h1>;
State 是一個內建的 React 對象，用於儲存有關組件當前情況的資訊。每個元件都可以管理自己的狀態，並在狀態變更時重新渲染。函數元件使用 useState 鉤子來管理狀態，而類別元件則使用 this.state 物件。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Props 用於將資料從一個元件傳遞到另一個元件。它們就像允許組件相互通信的函數參數。道具是只讀且不能被接收組件修改。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return <Welcome name="React" />;
}
在此範例中，Welcome 元件從 App 元件接收 name 屬性並渲染「Hello, React」。
掛鉤是允許您「掛鉤」函數元件中的 React 狀態和生命週期功能的函數。兩個最常用的鉤子是：
允許您為功能組件新增狀態。
function Greeting() {
return <h1>Hello, World!</h1>;
}
處理副作用，例如資料擷取、訂閱或每次渲染後手動變更 DOM。
class Greeting extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
其他常用的鉤子包括 useContext、useReducer、useRef 和 useCallback。
React 使用 虛擬 DOM（實際 DOM 的輕量級副本）來最佳化 UI 更新。 React 不是直接操作真實 DOM，而是先更新虛擬 DOM，然後計算出使實際 DOM 與虛擬版本同步所需的最小變更。此過程稱為協調，可顯著提高效能，尤其是在大型應用程式中。
生命週期方法是類別元件中的特殊方法，可讓您掛鉤元件生命週期的不同階段（渲染、更新和卸載）。一些重要的生命週期方法包括：
componentDidMount()：在元件掛載到 DOM 後呼叫一次。用於初始資料獲取或訂閱。
componentDidUpdate()：每次重新渲染後都會呼叫。用於根據狀態或道具變更執行更新。
componentWillUnmount()：在從 DOM 刪除元件之前呼叫。用於清理任務，例如取消 API 呼叫或刪除事件偵聽器。
在函數元件中，可以使用useEffect實現相同的功能。
在 React 中，您可以根據狀態或屬性有條件地渲染元件或元素。最常見的方法是使用 JavaScript 的三元運算子。
const element = <h1>Hello, JSX!</h1>;
條件渲染的其他方法包括在 JSX 中使用 if 語句或短路 (&&)。
在 React 中，元素列表是使用 .map() 方法建立的。清單中的每個項目都應該有一個唯一的「key」屬性來幫助 React 優化渲染。
const name = "React";
const element = <h1>Hello, {name}!</h1>;
鍵應該是唯一且穩定的，幫助 React 識別哪些項目已更改、新增或刪除。
在 React 中，表單通常使用 受控元件 進行處理，其中表單元素（如輸入）由 React 狀態控制。這使得 React 可以完全控製表單元素的值。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
在此範例中，輸入的值由 React 狀態控制，確保即時擷取輸入欄位中的任何變更。
Context API 允許您在組件之間共享狀態或數據，而無需在每個級別手動向下傳遞道具（也稱為“道具鑽取”）。當您需要在整個應用程式中傳遞全域資料（例如使用者身份驗證或主題設定）時，它特別有用。
function Greeting() {
return <h1>Hello, World!</h1>;
}
React.js 提供了廣泛的功能和術語供您掌握。從元件、JSX、狀態和 props 的基礎知識到鉤子、上下文和生命週期方法等更高級的概念，React 為建立現代 Web 應用程式提供了靈活且可擴展的框架。理解這些關鍵概念和術語將使您能夠釋放 React 的全部潛力，並建立健壯、可維護和動態的使用者介面。
以上是React.js 中的術語和功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
