React学习教程，从入门到精通， React 新创建组件语法知识点及案例代码(11）
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 组件的基本概念和实践技巧。