React ⚛️ 是一個用於建立使用者介面的強大 JavaScript 函式庫。它由 Facebook 於 2013 年開發，以其基於元件的架構和聲明性方法徹底改變了 UI 開發。無論您是建立簡單的 Web 應用程式還是複雜的系統，React 都可以讓您有效率且愉快地建立可重複使用的動態 UI。
本文深入探討了 React 的基礎知識及其核心概念：元件，並用大量程式碼範例來說明這些想法。
React 的核心是一個 JavaScript 函式庫，旨在建立動態和互動式使用者介面。它專注於應用程式的視圖層，遵循模型-視圖-控制器（MVC）架構。 React 可以輕鬆創建隨著應用程式資料變化而高效更新的介面。
React 應用程式是使用 元件 建構的，它們是 React 應用程式的建構塊。元件是 UI 的一個獨立部分，封裝了其邏輯、結構和樣式。
函數元件是簡單的 JavaScript 函數，它們接受 props 作為輸入並傳回 React 元素。它們是現代 React 應用程式中最常見的元件類型。
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
類別元件是擴展了 React.Component 類別的 ES6 類別。在引入 hooks 之前它們被廣泛使用。
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Usage
<Welcome name="Alice" />;
| 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>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Alice" />;
Props 是從父元件傳遞到子元件的參數，允許資料沿著元件層次結構流動。
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// Usage
<Welcome name="Alice" />;
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
function Greeting({ name }) {
return <h1>Welcome, {name}!</h1>;
}
function App() {
return <Greeting name="John" />;
}
// Renders: Welcome, John!
React 讓處理事件變得簡單。事件處理程序作為屬性傳遞給元素並在事件發生時執行。
function Header() {
return <header><h1>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 />
<Main />
<Footer />
</div>
);
}
// Usage
<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 />;
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 />;
在 React 中渲染清單時，為每個元素分配唯一的鍵以幫助 React 識別變更非常重要。
function Button() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}
// Usage
<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 />;
React 是建立現代 Web 應用程式的強大工具。其基於元件的架構，加上 props、state 和 hooks 等功能，使得創建動態、高效和可重複使用的 UI 成為可能。透過掌握 React 的核心概念並有效地使用其工具，開發人員可以提供卓越的使用者體驗，同時保持乾淨且可維護的程式碼庫。準備好開始了嗎？建立您的第一個 React 應用程式並查看組件的神奇作用！ ？
以上是什麼是 React ⚛️ 和組件的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
