什麼是 React ⚛️ 和組件的概念

React ⚛️ 是一個用於建立使用者介面的強大 JavaScript 函式庫。它由 Facebook 於 2013 年開發，以其基於元件的架構和聲明性方法徹底改變了 UI 開發。無論您是建立簡單的 Web 應用程式還是複雜的系統，React 都可以讓您有效率且愉快地建立可重複使用的動態 UI。

本文深入探討了 React 的基礎知識及其核心概念：元件，並用大量程式碼範例來說明這些想法。

什麼是 React？

React 的核心是一個 JavaScript 函式庫，旨在建立動態和互動式使用者介面。它專注於應用程式的視圖層，遵循模型-視圖-控制器（MVC）架構。 React 可以輕鬆創建隨著應用程式資料變化而高效更新的介面。

為什麼選擇React？

1. 可重複使用元件：透過將模組化 UI 分解為獨立、可重複使用的元件來開發模組化 UI。
2. 虛擬 DOM： 在更新實際 DOM 之前計算輕量級虛擬 DOM 中的更改，從而加快更新速度。
3. 聲明式： 描述你想在 UI 中看到的內容，React 處理剩下的事情。
4. 豐富的生態系： 利用 Redux、React Router 和 Next.js 等函式庫來擴充 React 的功能。

React 中元件的概念

React 應用程式是使用 元件 建構的，它們是 React 應用程式的建構塊。元件是 UI 的一個獨立部分，封裝了其邏輯、結構和樣式。

功能組件

函數元件是簡單的 JavaScript 函數，它們接受 props 作為輸入並傳回 React 元素。它們是現代 React 應用程式中最常見的元件類型。

範例：基本功能組件

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

// Usage
<welcome name="Alice"></welcome>;

類別組件

類別元件是擴展了 React.Component 類別的 ES6 類別。在引入 hooks 之前它們被廣泛使用。

範例：基本類別組件

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

// Usage
<welcome name="Alice"></welcome>;

組件剖析

範例：具有狀態的功能組件

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

分解：

1. 狀態管理： useState 鉤子用於管理元件內的狀態（計數）。
2. Props：可以透過props將資料傳遞給元件。
3. 事件： onClick 事件處理程序會在點選按鈕時更新狀態。

道具與狀態

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

功能 道具 狀態 標題> 定義 從父組件傳遞到組件的資料。 組件內管理的資料。 可變性 不可變（接收組件無法變更）。 可變（可在組件內更新）。 用法 用於將資料傳遞給子組件。 用於隨時間變化的動態資料。 表>

組件中的狀態

State是React中的一個特殊對象，用於儲存元件需要渲染的資料。功能元件使用 useState 鉤子進行狀態管理。

範例：帶有狀態的計數器

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

// Usage
<welcome name="Alice"></welcome>;

組件中的道具

Props 是從父元件傳遞到子元件的參數，允許資料沿著元件層次結構流動。

範例：傳遞道具

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

組合組件

React 鼓勵巢狀元件從更小的、可重複使用的建構塊建立複雜的 UI。

範例：嵌套組件

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

類別組件中的生命週期方法

類別元件包括在安裝、更新和卸載階段執行操作的生命週期方法。對於功能元件，像 useEffect 這樣的 React hooks 取代了這些生命週期方法。

範例：生命週期方法

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

範例：具有 useEffect 的生命週期

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

function App() {
  return <greeting name="John"></greeting>;
}

// Renders: Welcome, John!

React 中的事件處理

React 讓處理事件變得簡單。事件處理程序作為屬性傳遞給元素並在事件發生時執行。

範例：點擊事件

function Header() {
  return <header><h1 id="My-Website">My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <header></header>
      <main></main>
      <footer></footer>
    </div>
  );
}

// Usage
<app></app>;

範例：輸入處理

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<timer></timer>;

條件渲染

React 可讓您根據應用程式邏輯有條件地渲染元件或元素。

範例：條件渲染

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<timer></timer>;

列表和鍵

在 React 中渲染清單時，為每個元素分配唯一的鍵以幫助 React 識別變更非常重要。

範例：渲染列表

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onclick="{handleClick}">Click Me</button>;
}

// Usage
<button></button>;

可重複使用組件

React 鼓勵創建可在應用程式中重複使用的元件，以減少冗餘。

範例：可重複使用的按鈕組件

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value="{text}" onchange="{handleChange}">
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<inputexample></inputexample>;

結論

React 是建立現代 Web 應用程式的強大工具。其基於元件的架構，加上 props、state 和 hooks 等功能，使得創建動態、高效和可重複使用的 UI 成為可能。透過掌握 React 的核心概念並有效地使用其工具，開發人員可以提供卓越的使用者體驗，同時保持乾淨且可維護的程式碼庫。準備好開始了嗎？建立您的第一個 React 應用程式並查看組件的神奇作用！ ？

以上是什麼是 React ⚛️ 和組件的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！