React学习教程，从入门到精通， React 新创建组件语法知识点及案例代码(11）

发布于：2025-09-06 ⋅ 阅读:(14) ⋅ 点赞:(0)

React 新创建组件语法知识点及案例代码

React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库。随着 React 的不断发展，创建组件的方式也在不断演进。本文将详细介绍 React 中创建组件的最新语法，包括函数组件（Functional Components）、使用 Hooks 以及一些现代的 JavaScript 特性，并提供一个详细的案例代码，带有详细注释，帮助 React 初学者快速上手。

一、React 组件概述

在 React 中，组件是构建用户界面的基本单元。组件可以是一个函数或一个类，但随着 React Hooks 的引入，函数组件已成为主流。以下是创建组件的几种主要方式：

  1. 函数组件（Functional Components）：使用 JavaScript 函数定义的组件。
  2. 类组件（Class Components）：使用 ES6 类定义的组件。
  3. 使用 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">
      <input
        type="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) => (
        <TodoItem
          key={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}>
      <input
        type="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">
      <input
        type="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) => (
        <TodoItem
          key={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}>
      <input
        type="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;
}
  • 样式说明:
    • 设置应用的宽度和居中显示。
    • 样式化待办事项列表项，包括复选框、文本和删除按钮。

四、运行应用

  1. 安装依赖：

    确保你已经安装了 Node.js 和 npm 或 yarn。

    npx create-react-app my-todo-app
cd my-todo-app

  2. 添加代码：

    将上述代码替换 src 文件夹中的 App.js 和 index.js 文件，并添加 styles.css 文件。

  3. 启动应用：

    npm start

    或

    yarn start

  4. 访问应用：

    打开浏览器，访问 http://localhost:3000，你将看到简单的待办事项应用。

五、总结

本文介绍了 React 中创建组件的最新语法，包括函数组件、使用 Hooks 以及一些现代的 JavaScript 特性。通过一个简单的待办事项应用案例，详细展示了如何组合多个组件、管理状态、处理事件以及样式化组件。希望这些内容能够帮助 React 初学者快速掌握 React 组件的基本概念和实践技巧。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布