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

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"><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;
}
  • 样式说明:
    • 设置应用的宽度和居中显示。
    • 样式化待办事项列表项，包括复选框、文本和删除按钮。

四、运行应用

  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 组件的基本概念和实践技巧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/95897.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/95897.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SQL Server全链路安全防护

SQL Server全链路安全防护

SQL Server 的安全性是一个多层次、综合性的体系&#xff0c;旨在保护数据免受未授权访问、篡改和泄露。其核心安全机制可概括为以下几个方面&#xff1a;1. 身份验证&#xff08;Authentication&#xff09; Windows 身份验证&#xff1a; 使用 Windows 账户&#xff08;域/本…
阅读更多...
如何利用Web3提升企业竞争力

如何利用Web3提升企业竞争力

在这个信息爆炸的时代&#xff0c;Web3技术以其独特的去中心化、透明性和用户主权特性&#xff0c;成为企业提升竞争力的新战场。本文将深入探讨企业如何把握Web3的浪潮&#xff0c;实现业务的飞跃。 1. 把握Web3的核心价值 Web3的核心在于去中心化、透明性和用户主权。这种模式…
阅读更多...
HOW - 在浏览器下载一个 Excel 表格文件

HOW - 在浏览器下载一个 Excel 表格文件

文章目录一、技术方案二、前端具体实现代码分析转换逻辑注意事项一、技术方案 后台返回 base64 数据 {code: 0,data: "base64;...", }前端进行数据格式转化并下载成 Excel 文件 这篇文章主要介绍第二个步骤的实现。 二、前端具体实现 代码 src/utils/transform…
阅读更多...
【Android】Room数据库的使用

【Android】Room数据库的使用

三三要成为安卓糕手 引入 Room是一个抽象层&#xff0c;对SQLite进行了封装&#xff0c;简化了SQLite数据库的操作&#xff0c;让开发者能以更加对象化的方式进行数据库操作&#xff1b;Room解决了SQLite操作繁琐&#xff0c;容易产生错误的问题&#xff0c;让开发者能以更加对…
阅读更多...
Next.js 介绍：为什么选择它来构建你的下一个 Web 应用？

Next.js 介绍：为什么选择它来构建你的下一个 Web 应用？

Next.js 介绍&#xff1a;为什么选择它来构建你的下一个 Web 应用&#xff1f; 作者&#xff1a;码力无边你好&#xff0c;欢迎来到我们的 Next.js 专栏&#xff01;在接下来的 30 篇文章中&#xff0c;我们将一起踏上一段从入门到精通的旅程&#xff0c;深入探索这个强大而优雅…
阅读更多...
开发环境 之 编辑器、编译器、IDE梳理

开发环境 之 编辑器、编译器、IDE梳理

小生第一次学习编程时&#xff0c;懵懵搞不懂编辑器、编译器、IDE区别&#xff0c;虽然这对前期学习编程语言语法的影响不是很大&#xff0c;但是现在梳理一下&#xff0c;总归心里踏实些。 一、概念及区别 IDE是前面几者的集成&#xff0c;前面几个分别是IDE的子集。对比维度编…
阅读更多...
高级RAG策略学习（六）——Contextual Chunk Headers（CCH）技术

高级RAG策略学习（六）——Contextual Chunk Headers（CCH）技术

Contextual Chunk Headers&#xff08;CCH&#xff09;技术深度解析 第一部分&#xff1a;理论基础与核心原理 一、核心定义&#xff1a;给 “文本块” 加 “上下文标签” Contextual Chunk Headers&#xff08;上下文块标题&#xff0c;简称 CCH&#xff09;本质是为文档拆分后…
阅读更多...
人形机器人控制系统核心芯片从SoC到ASIC的进化路径

人形机器人控制系统核心芯片从SoC到ASIC的进化路径

目录&#xff1a; 0 前言 1 人形机器人控制系统核心芯片选择ASIC而非SoC的理由 1.1 SoC的架构特征 1.2 ASIC的架构特征 1.3 SoC的优势&#xff08;继承软件生态&#xff09; 1.4 ASIC的优势&#xff08;硬件底层算法就是应用层算法&#xff09; 1.5 人形机器人控制系统核…
阅读更多...
linux thread 线程一

linux thread 线程一

thread线程是linux的重要概念。线程不能独立存在&#xff0c;必须在进程中存在。一个进程必须有一个线程&#xff0c;如果进程中没有创建新线程&#xff0c;进程启动后本身就有一个线程。使用getpid、getppid获取进程的进程ID和父进程ID。使用pthread_self获取到当前线程的ID。…
阅读更多...
Arduino Nano33 BLESense Rev2【室内空气质量检测语音识别蓝牙调光台灯】

Arduino Nano33 BLESense Rev2【室内空气质量检测语音识别蓝牙调光台灯】

一、硬件介绍 1、产品特点 Arduino Nano 33 BLE Rev2&#xff0c;利用了nRF52840微控制器的先进功能。这款32位Arm Cortex-M4 CPU 64 MHz与MicroPython的兼容性增强了板子的灵活性&#xff0c;该开发板的突出特点是其蓝牙低功耗&#xff08;BLE&#xff09;功能&#xff0c;使…
阅读更多...
【问题解决】mac笔记本遇到鼠标无法点击键盘可响应处理办法？（Command+Option+P+R）

【问题解决】mac笔记本遇到鼠标无法点击键盘可响应处理办法？（Command+Option+P+R）

背景 如题。鼠标无法点击&#xff0c;但可以移动。触控板能够波动&#xff0c;鼠标翻页能够work&#xff0c;但是点击后无法响应。 根因 电脑缓存问题 解决办法 重置PRAM&#xff1a; 确保电脑关机状态&#xff08;可以先sudo shutdown -t now)&#xff08;一定要确保&#xff…
阅读更多...
23ai数据库通过SQLcl生成AWR报告

23ai数据库通过SQLcl生成AWR报告

‌1. 查看现有快照SQL> awr list snap;SNAP_ID DBID BEGIN_INTERVAL_TIME END_INTERVAL_TIME FLUSH_LEVEL __________ _____________ __________________________________ __________________________________ ______________793 …
阅读更多...
基于Django+Vue3+YOLO的智能气象检测系统

基于Django+Vue3+YOLO的智能气象检测系统

基于DjangoVue3YOLO的智能气象检测系统 项目简介 本项目是一个集成了人工智能深度学习技术的现代化气象检测系统&#xff0c;采用前后端分离架构&#xff0c;结合YOLO目标检测算法&#xff0c;实现了对气象现象的智能识别与分析。系统提供了完整的用户管理、实时检测、历史记录…
阅读更多...
(4)什么时候引入Seata‘‘

(4)什么时候引入Seata‘‘

非常好的问题&#xff01;这两个问题正是技术选型时需要重点考虑的。什么时候需要引入 Seata&#xff1f;需要引入 Seata 的场景&#xff1a;跨数据库的分布式事务// 订单服务&#xff08;MySQL&#xff09; 库存服务&#xff08;PostgreSQL&#xff09; 账户服务&#xff08…
阅读更多...
苹果内部 AI聊天机器人“Asa”曝光，为零售员工打造专属A

苹果内部 AI聊天机器人“Asa”曝光，为零售员工打造专属A

MacRumors网站的亚伦佩里斯&#xff08;Aaron Perris&#xff09;透露&#xff0c;苹果正在内部测试一款名为“Asa”的AI聊天机器人。这款工具旨在赋能Apple Store零售员工&#xff0c;帮助他们快速掌握iPhone等产品的特色和差异化使用场景&#xff0c;从而提升与顾客互动时的解…
阅读更多...
MySQL常见报错分析及解决方案总结(12)---slave_net_timeout

MySQL常见报错分析及解决方案总结(12)---slave_net_timeout

关于超时报错&#xff0c;一共有五种超时参数&#xff0c;详见&#xff1a;MySQL常见报错分析及解决方案总结(7)---超时参数connect_timeout、interactive_timeout/wait_timeout、lock_wait_timeout、net等-CSDN博客 以下是当前报错的排查方法和解决方案&#xff1a; 在 Wind…
阅读更多...
云计算学习笔记——日志、SELinux、FTP、systemd篇

云计算学习笔记——日志、SELinux、FTP、systemd篇

《云计算学习日记Day15》—— 从零开始的云计算之旅 今天是系统学习云计算的第十五天&#xff0c;记录了关于我的云计算学习&#xff0c;后续将每日更新我的笔记。欢迎大家一起来学习&#xff0c;如果内容有遗漏和错误&#xff0c;还请大家多多指正和包涵&#xff0c;谢谢大家 …
阅读更多...
3Ds Max Gamma值完全指南：问题识别与正确设置解析

3Ds Max Gamma值完全指南：问题识别与正确设置解析

当渲染图像与本地图片相比亮度偏黑或偏白时&#xff0c;很可能是因为Gamma输入输出设置不一致。需要注意的是&#xff0c;Gamma问题通常表现为整体亮度偏差&#xff0c;而非大面积曝光或全黑状况。Gamma设置教程问题一&#xff1a;Gamma校正未开启如果使用VR帧缓冲窗口渲染但未…
阅读更多...
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声，只需 50 行代码

用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声，只需 50 行代码

用 Rust Actix-Web 打造“Hello, WebSocket!”——从握手到回声&#xff0c;只需 50 行代码 一、为什么选择 Rust 写 WebSocket&#xff1f; 零成本抽象&#xff1a;编译期确定生命周期&#xff0c;无 GC 抖动&#xff0c;延迟低至微秒级actix-web&#xff1a;Tokio 生态最成熟…
阅读更多...
基于Cursor的 STM32工程搭建 (编译、下载、仿真)

基于Cursor的 STM32工程搭建 (编译、下载、仿真)

嵌入式学习交流Q群 679912988 简介 本工程使用GCC编译器、MinGW、CMake构建工具和OpenOCD调试工具。实现了替代KEIL, IAR等在某些情况下不方便使用的情况。实现了编译、调试、下载、烧录一体。搭配Cursor的Tab补全功能&#xff0c;编码效率大大提升。 工具下载及安装 Cursor…
阅读更多...
最新文章

Copyright @ 2022~2023