React 新創建組件語法知識點及案例代碼
React 是由 Facebook 開發的一個用于構建用戶界面的 JavaScript 庫。隨著 React 的不斷發展，創建組件的方式也在不斷演進。本文將詳細介紹 React 中創建組件的最新語法，包括函數組件（Functional Components）、使用 Hooks 以及一些現代的 JavaScript 特性，并提供一個詳細的案例代碼，帶有詳細注釋，幫助 React 初學者快速上手。
一、React 組件概述
在 React 中，組件是構建用戶界面的基本單元。組件可以是一個函數或一個類，但隨著 React Hooks 的引入，函數組件已成為主流。以下是創建組件的幾種主要方式：
- 函數組件（Functional Components）：使用 JavaScript 函數定義的組件。
- 類組件（Class Components）：使用 ES6 類定義的組件。
- 使用 Hooks 的函數組件：在函數組件中使用 React Hooks 來管理狀態和副作用。
本文將重點介紹使用 Hooks 的函數組件，這是當前 React 社區推薦的方式。
二、React 新創建組件語法知識點
1. 函數組件（Functional Components）
函數組件是最簡單的組件形式，它接收 props 作為參數并返回一個 React 元素。
import React from 'react';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
2. 使用 JSX
JSX 是一種 JavaScript 的語法擴展，允許在 JavaScript 代碼中編寫類似 HTML 的結構。它是 React 推薦使用的語法。
const element = <h1>Hello, World!</h1>;
3. Props（屬性）
props 是組件接收的參數，用于將數據從父組件傳遞到子組件。
function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}// 使用組件
<Greeting name="Alice" />
4. State（狀態）
在函數組件中，使用 useState Hook 來管理狀態。
import React, { 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>);
}
5. Hooks
Hooks 是 React 16.8 引入的新特性，允許在函數組件中使用狀態和其他 React 功能。主要的 Hooks 包括：
useState：用于在函數組件中添加狀態。useEffect：用于處理副作用，如數據獲取、訂閱等。useContext：用于在組件樹中共享狀態。useReducer：用于復雜的狀態邏輯。
6. 事件處理
在 React 中，事件處理與 DOM 事件類似，但使用駝峰命名法。
function Button() {const handleClick = () => {alert('Button clicked!');};return <button onClick={handleClick}>Click Me</button>;
}
7. 條件渲染
根據狀態或 props 條件渲染不同的內容。
function Greeting(props) {const isLoggedIn = props.isLoggedIn;return (<div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}</div>);
}
8. 列表渲染
使用 map 方法渲染列表。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);function NumberList() {return (<ul>{listItems}</ul>);
}
9. 組件組合與復用
通過組合多個組件來構建復雜的用戶界面。
function App() {return (<div><Welcome name="Alice" /><Welcome name="Bob" /><Welcome name="Charlie" /></div>);
}
三、案例代碼：簡單的待辦事項（Todo）應用
下面是一個使用 React 函數組件和 Hooks 實現的簡單待辦事項應用。該應用包含添加待辦事項、標記完成和刪除待辦事項的功能。
1. 完整代碼
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './styles.css';// TodoItem 組件
function TodoItem({ todo, toggleComplete, deleteTodo }) {return (<li className="todo-item"><inputtype="checkbox"checked={todo.completed}onChange={() => toggleComplete(todo.id)}/><span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.text}</span><button onClick={() => deleteTodo(todo.id)}>Delete</button></li>);
}// TodoList 組件
function TodoList({ todos, toggleComplete, deleteTodo }) {return (<ul>{todos.map((todo) => (<TodoItemkey={todo.id}todo={todo}toggleComplete={toggleComplete}deleteTodo={deleteTodo}/>))}</ul>);
}// AddTodo 組件
function AddTodo({ addTodo }) {const [value, setValue] = useState('');const handleSubmit = (e) => {e.preventDefault();if (!value.trim()) return;addTodo(value.trim());setValue('');};return (<form onSubmit={handleSubmit}><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}placeholder="Add a new todo"/><button type="submit">Add</button></form>);
}// Main App 組件
function App() {const [todos, setTodos] = useState([{ id: 1, text: 'Learn React', completed: false },{ id: 2, text: 'Build a Todo App', completed: false },]);const addTodo = (text) => {const newTodo = {id: Date.now(),text: text,completed: false,};setTodos([...todos, newTodo]);};const toggleComplete = (id) => {const updatedTodos = todos.map((todo) => {if (todo.id === id) {return { ...todo, completed: !todo.completed };}return todo;});setTodos(updatedTodos);};const deleteTodo = (id) => {const filteredTodos = todos.filter((todo) => todo.id !== id);setTodos(filteredTodos);};return (<div className="app"><h1>My Todo List</h1><AddTodo addTodo={addTodo} /><TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} /></div>);
}ReactDOM.render(<App />, document.getElementById('root'));
2. 代碼詳解
a. 導入必要的模塊
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
React和useState是 React 的核心庫和 Hook。ReactDOM用于將 React 組件渲染到 DOM 中。./styles.css是應用的樣式文件。
b. TodoItem 組件
function TodoItem({ todo, toggleComplete, deleteTodo }) {return (<li className="todo-item"><inputtype="checkbox"checked={todo.completed}onChange={() => toggleComplete(todo.id)}/><span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.text}</span><button onClick={() => deleteTodo(todo.id)}>Delete</button></li>);
}
- Props:
todo: 單個待辦事項對象。toggleComplete: 切換完成狀態的函數。deleteTodo: 刪除待辦事項的函數。
- 功能:
- 顯示待辦事項的文本和完成狀態。
- 提供復選框來切換完成狀態。
- 提供刪除按鈕來刪除待辦事項。
c. TodoList 組件
function TodoList({ todos, toggleComplete, deleteTodo }) {return (<ul>{todos.map((todo) => (<TodoItemkey={todo.id}todo={todo}toggleComplete={toggleComplete}deleteTodo={deleteTodo}/>))}</ul>);
}
- Props:
todos: 待辦事項數組。toggleComplete和deleteTodo同上。
- 功能:
- 渲染所有待辦事項的列表。
- 使用
map方法遍歷todos數組并渲染TodoItem組件。
d. AddTodo 組件
function AddTodo({ addTodo }) {const [value, setValue] = useState('');const handleSubmit = (e) => {e.preventDefault();if (!value.trim()) return;addTodo(value.trim());setValue('');};return (<form onSubmit={handleSubmit}><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}placeholder="Add a new todo"/><button type="submit">Add</button></form>);
}
- Props:
addTodo: 添加新待辦事項的函數。
- 功能:
- 提供一個輸入框供用戶輸入新的待辦事項。
- 處理表單提交，調用
addTodo函數并清空輸入框。
e. Main App 組件
function App() {const [todos, setTodos] = useState([{ id: 1, text: 'Learn React', completed: false },{ id: 2, text: 'Build a Todo App', completed: false },]);const addTodo = (text) => {const newTodo = {id: Date.now(),text: text,completed: false,};setTodos([...todos, newTodo]);};const toggleComplete = (id) => {const updatedTodos = todos.map((todo) => {if (todo.id === id) {return { ...todo, completed: !todo.completed };}return todo;});setTodos(updatedTodos);};const deleteTodo = (id) => {const filteredTodos = todos.filter((todo) => todo.id !== id);setTodos(filteredTodos);};return (<div className="app"><h1>My Todo List</h1><AddTodo addTodo={addTodo} /><TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} /></div>);
}
- State:
todos: 存儲所有待辦事項的數組。
- 函數:
addTodo: 添加新的待辦事項。toggleComplete: 切換待辦事項的完成狀態。deleteTodo: 刪除指定的待辦事項。
- 功能:
- 渲染
AddTodo和TodoList組件。 - 提供初始的待辦事項數據。
- 渲染
f. 渲染應用
ReactDOM.render(<App />, document.getElementById('root'));
- 將
App組件渲染到頁面的root元素中。
3. 樣式（styles.css）
.app {max-width: 600px;margin: 50px auto;text-align: center;
}.todo-item {list-style: none;padding: 10px;border-bottom: 1px solid #ccc;display: flex;align-items: center;
}.todo-item input {margin-right: 10px;
}.todo-item span {flex: 1;text-align: left;
}.todo-item button {background-color: #ff4d4d;color: white;border: none;padding: 5px 10px;cursor: pointer;
}
- 樣式說明:
- 設置應用的寬度和居中顯示。
- 樣式化待辦事項列表項，包括復選框、文本和刪除按鈕。
四、運行應用
-
安裝依賴：
確保你已經安裝了 Node.js 和 npm 或 yarn。
npx create-react-app my-todo-app cd my-todo-app -
添加代碼：
將上述代碼替換
src文件夾中的App.js和index.js文件，并添加styles.css文件。 -
啟動應用：
npm start或
yarn start -
訪問應用：
打開瀏覽器，訪問
http://localhost:3000，你將看到簡單的待辦事項應用。
五、總結
本文介紹了 React 中創建組件的最新語法，包括函數組件、使用 Hooks 以及一些現代的 JavaScript 特性。通過一個簡單的待辦事項應用案例，詳細展示了如何組合多個組件、管理狀態、處理事件以及樣式化組件。希望這些內容能夠幫助 React 初學者快速掌握 React 組件的基本概念和實踐技巧。
什么時候引入Seata‘‘)
---slave_net_timeout)
)