React.js 中的術語和功能

React.js，通常稱為 React，是一個強大的 JavaScript 函式庫，用於建立使用者介面，特別是單頁應用程式 (SPA)。它使開發人員能夠透過將複雜的 UI 分解為更小的、可重複使用的元件來創建複雜的 UI。要充分利用 React 的強大功能，了解其核心術語和功能非常重要。在本文中，我們將詳細介紹您在使用 React.js 時需要了解的一些關鍵概念、術語和功能。

1. 組件

功能組件：

函數元件是當今定義 React 元件最常見的方式。它們只是傳回表示 UI 的 JSX (JavaScript XML) 的 JavaScript 函數。函數元件也可以使用 React Hooks 來管理狀態和副作用。

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

類別組件：

在引入 React Hooks 之前，類別元件是管理元件狀態和生命週期方法的主要方式。儘管它們仍然被廣泛使用，但帶有鉤子的函數組件現在是首選方法。

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-World">Hello, World!</h1>;
  }
}

2. JSX（JavaScript XML）

JSX 是 JavaScript 的語法擴展，可讓您直接在 JavaScript 中編寫類似 HTML 的程式碼。 React 使用 JSX 來描述 UI 應該是什麼樣子。儘管 JSX 看起來像 HTML，但它在底層被編譯成 JavaScript。

const element = <h1 id="Hello-JSX">Hello, JSX!</h1>;

您也可以將 JavaScript 表達式括在大括號中來將 JavaScript 表達式嵌入 JSX 中：

const name = "React";
const element = <h1 id="Hello-name">Hello, {name}!</h1>;

3. 狀態

State 是一個內建的 React 對象，用於儲存有關組件當前情況的資訊。每個元件都可以管理自己的狀態，並在狀態變更時重新渲染。函數元件使用 useState 鉤子來管理狀態，而類別元件則使用 this.state 物件。

useState（函數元件）範例：

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

this.state（類別元件）範例：

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

4. 道具（屬性）

Props 用於將資料從一個元件傳遞到另一個元件。它們就像允許組件相互通信的函數參數。道具是只讀且不能被接收組件修改。

例子：

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}</h1>;
}

function App() {
  return <welcome name="React"></welcome>;
}

在此範例中，Welcome 元件從 App 元件接收 name 屬性並渲染「Hello, React」。

5. 掛鉤

掛鉤是允許您「掛鉤」函數元件中的 React 狀態和生命週期功能的函數。兩個最常用的鉤子是：

使用狀態：

允許您為功能組件新增狀態。

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

使用效果：

處理副作用，例如資料擷取、訂閱或每次渲染後手動變更 DOM。

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-World">Hello, World!</h1>;
  }
}

其他常用的鉤子包括 useContext、useReducer、useRef 和 useCallback。

6. 虛擬 DOM

React 使用 虛擬 DOM（實際 DOM 的輕量級副本）來最佳化 UI 更新。 React 不是直接操作真實 DOM，而是先更新虛擬 DOM，然後計算出使實際 DOM 與虛擬版本同步所需的最小變更。此過程稱為協調，可顯著提高效能，尤其是在大型應用程式中。

7. 生命週期方法（類別組件）

生命週期方法是類別元件中的特殊方法，可讓您掛鉤元件生命週期的不同階段（渲染、更新和卸載）。一些重要的生命週期方法包括：

• componentDidMount()：在元件掛載到 DOM 後呼叫一次。用於初始資料獲取或訂閱。

• componentDidUpdate()：每次重新渲染後都會呼叫。用於根據狀態或道具變更執行更新。

• componentWillUnmount()：在從 DOM 刪除元件之前呼叫。用於清理任務，例如取消 API 呼叫或刪除事件偵聽器。

在函數元件中，可以使用useEffect實現相同的功能。

8. 條件渲染

在 React 中，您可以根據狀態或屬性有條件地渲染元件或元素。最常見的方法是使用 JavaScript 的三元運算子。

例子：

const element = <h1 id="Hello-JSX">Hello, JSX!</h1>;

條件渲染的其他方法包括在 JSX 中使用 if 語句或短路 (&&)。

9. 列表和鍵

在 React 中，元素列表是使用 .map() 方法建立的。清單中的每個項目都應該有一個唯一的「key」屬性來幫助 React 優化渲染。

例子：

const name = "React";
const element = <h1 id="Hello-name">Hello, {name}!</h1>;

鍵應該是唯一且穩定的，幫助 React 識別哪些項目已更改、新增或刪除。

10. 表單和受控組件

在 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 狀態控制，確保即時擷取輸入欄位中的任何變更。

11. 上下文API

Context API 允許您在組件之間共享狀態或數據，而無需在每個級別手動向下傳遞道具（也稱為“道具鑽取”）。當您需要在整個應用程式中傳遞全域資料（例如使用者身份驗證或主題設定）時，它特別有用。

例子：

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

結論

React.js 提供了廣泛的功能和術語供您掌握。從元件、JSX、狀態和 props 的基礎知識到鉤子、上下文和生命週期方法等更高級的概念，React 為建立現代 Web 應用程式提供了靈活且可擴展的框架。理解這些關鍵概念和術語將使您能夠釋放 React 的全部潛力，並建立健壯、可維護和動態的使用者介面。

以上是React.js 中的術語和功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！