【React】通过实际示例详解评论列表渲染和删除
文章目录
- 一、引言
- 二、初始状态与状态更新
- 1. 使用`useState`钩子管理状态
- 2. 评论列表的初始数据
- 三、列表渲染的实现
- 1. `list.map(item => { ... })`
- 2. `return` 语句
- 3. JSX 语法
- 4. 为什么这样设计
- 5. 完整解读
- 四、列表项的唯一标识
- 1. `key` 的作用
- 2. `key` 的用法
- 3. 可以没有 `key` 吗?
- 4. 示例代码中的 `key`
- 五、处理评论删除
- 1. 删除评论的实现
- 2. 条件渲染删除按钮
- 六、完整代码示例
在React开发中,列表渲染是一个非常常见且重要的功能。本文将通过一个实际的评论列表渲染例子,详细介绍如何使用React的
useState
钩子和数组方法动态渲染和更新列表。本文内容从基础到进阶,涵盖了核心概念和实现方法,帮助开发者掌握React中的列表渲染技术。
一、引言
在现代Web开发中,动态数据的渲染和更新是常见需求。React作为一个强大的前端框架,通过其灵活的状态管理和组件化设计,使得处理这些需求变得更加简单和高效。本文将通过一个完整的App组件代码,详细解析其中的评论列表渲染和更新的实现。
二、初始状态与状态更新
1. 使用useState
钩子管理状态
在React函数组件中,useState
钩子用于声明状态变量并提供更新函数。以下代码声明了一个初始评论列表的状态变量list
,并使用setList
函数来更新它:
const [list, setList] = useState(defaultList);
2. 评论列表的初始数据
const defaultList = [{rpid: 3,user: {uid: '13258165',avatar: '',uname: '周杰伦',},content: '哎哟,不错哦',ctime: '10-18 08:15',like: 88,},// 其他评论数据...
];
三、列表渲染的实现
在React中,使用map
方法可以方便地将数组数据转换为React元素。以下代码展示了如何遍历list
数组并生成评论列表:
<div className="reply-list">{list.map(item => {return (<div key={item.rpid} className="reply-item">{/* 头像 */}<div className="root-reply-avatar"><div className="bili-avatar"><imgclassName="bili-avatar-img"src={item.user.avatar}alt=""/></div></div><div className="content-wrap">{/* 用户名 */}<div className="user-info"><div className="user-name">{item.user.uname}</div></div>{/* 评论内容 */}<div className="root-reply"><span className="reply-content">{item.content}</span><div className="reply-info">{/* 评论时间 */}<span className="reply-time">{item.ctime}</span>{/* 点赞数 */}<span className="reply-time">点赞数:{item.like}</span>{user.uid === item.user.uid && (<spanclassName="delete-btn"onClick={() => onDelete(item.rpid)}>删除</span>)}</div></div></div></div>)})}
</div>
1. list.map(item => { ... })
1.1. map
函数
map
是 JavaScript 中数组的一个方法,用于遍历数组中的每个元素,并返回一个新的数组。map
方法接收一个回调函数作为参数,回调函数会对数组中的每个元素执行操作,然后返回新数组中的元素。具体语法如下:
const newArray = array.map(callback(element, index, array));
callback
是对每个元素执行的函数。element
是当前处理的元素。index
是当前元素的索引。array
是被遍历的数组。
在这段代码中,map
方法用于遍历 list
数组中的每个 item
,并返回包含 JSX 元素的数组。
1.2. 箭头函数 (item => { ... })
箭头函数是 ES6 中引入的一种更简洁的函数表达方式。箭头函数没有自己的 this
绑定,而是从作用域链的上一层继承 this
。它的语法如下:
const functionName = (parameter) => { ... };
在这段代码中,箭头函数 item => { ... }
用于定义一个回调函数,其中 item
是 list
数组中的每个元素。
2. return
语句
在箭头函数的回调函数内部,return
语句用于返回一个 JSX 元素,这个元素将被放入新的数组中。具体来说,return
语句返回了一个包含评论项的 div
元素。
3. JSX 语法
JSX 是 JavaScript 的一种语法扩展,用于描述 UI 结构。它看起来很像 HTML,但实际上是 React.createElement() 的语法糖。React 会将 JSX 代码转换为 JavaScript 对象,从而构建虚拟 DOM。
在这段代码中,JSX 用于描述每个评论项的结构。具体的 JSX 代码如下:
<div key={item.rpid} className="reply-item">{/* 列表项的内容 */}
</div>
key={item.rpid}
:key
属性是 React 中用于唯一标识每个列表项的标识符,有助于优化列表的渲染和更新。className="reply-item"
:className
是 JSX 中用于指定 CSS 类名的属性,相当于 HTML 中的class
。
4. 为什么这样设计
4.1. 使用 map
渲染列表
使用 map
函数渲染列表是一种常见的模式,因为它能够简洁而高效地遍历数组,并生成一组对应的 JSX 元素。每个元素都可以根据需要进行个性化渲染。
4.2. 使用 key
属性
在渲染列表时,React 需要一个唯一的 key
属性来区分不同的元素,从而高效地更新和重新渲染组件。key
属性的值应当是唯一的,且尽量稳定,以避免因重新渲染而导致的性能问题或潜在的 Bug。
4.3. 使用箭头函数
箭头函数使得代码更加简洁,同时避免了传统函数中的 this
绑定问题。在这个例子中,箭头函数用于定义 map
函数的回调,使得代码更易于阅读和维护。
5. 完整解读
{list.map(item => {return (<div key={item.rpid} className="reply-item">{/* 列表项的内容 */}</div>)
})}
list.map(item => { ... })
:对list
数组中的每个元素item
执行回调函数。return
:返回一个包含评论项的 JSX 元素。<div key={item.rpid} className="reply-item">...</div>
:为每个评论项生成一个div
元素,并指定唯一的key
属性和 CSS 类名。
四、列表项的唯一标识
在渲染列表时,确保每个列表项都有一个唯一的key
属性是至关重要的。这里使用评论的rpid
作为key
:
<div key={item.rpid} className="reply-item">
1. key
的作用
当 React 渲染列表时,它需要一个唯一的标识符来跟踪每个元素,以便在元素发生变化时可以高效地重新渲染和更新。这主要体现在以下几个方面:
元素的识别
key
帮助 React 识别哪些元素发生了变化、被添加或被移除。例如,当我们有一个列表并对其进行重新排序时,key
使 React 能够知道哪些项是相同的,哪些项是新增的或删除的。
提高渲染性能
有了 key
,React 可以根据变化最小化 DOM 操作。例如,如果一个列表项的位置发生了变化,而它的 key
没有变,React 只会移动 DOM 元素,而不是销毁旧元素并创建新元素,这大大提高了性能。
防止潜在的 Bug
没有 key
或 key
不唯一,可能导致一些潜在的 Bug。例如,输入框中的内容可能会丢失,组件的状态可能会出错等。key
保证了每个元素在其父元素中都是独一无二的,这样 React 就可以正确地维护和更新组件的状态。
2. key
的用法
在列表中使用 key
的典型方式如下:
<div key={item.rpid} className="reply-item">{/* 列表项的内容 */}
</div>
这里的 item.rpid
是一个唯一标识符,对于每个列表项来说都是独一无二的。
3. 可以没有 key
吗?
不能没有 key
。如果不提供 key
,React 会发出警告,告知 key
是必要的。即使不提供 key
的代码能够工作,它也会导致性能下降和潜在的 Bug。因此,始终建议在列表渲染中为每个元素提供一个唯一的 key
。
4. 示例代码中的 key
代码中,key
的用法如下:
{list.map(item => {return (<div key={item.rpid} className="reply-item">{/* 列表项的内容 */}</div>)
})}
这个 key={item.rpid}
确保了每个 reply-item
元素都有一个唯一标识符 rpid
,这样 React 可以高效地更新和重新渲染评论列表。
五、处理评论删除
1. 删除评论的实现
在React中,要删除列表中的某个元素,可以使用数组的filter
方法并调用setList
来更新状态。以下是删除评论的实现代码:
const onDelete = rpid => {setList(list.filter(item => item.rpid !== rpid));
};
2. 条件渲染删除按钮
只有当前登录用户的评论才会显示删除按钮。这通过条件渲染来实现:
{user.uid === item.user.uid && (<spanclassName="delete-btn"onClick={() => onDelete(item.rpid)}>删除</span>
)}
- 条件渲染
{user.uid === item.user.uid && ( ... )}
这一部分使用了逻辑与运算符(&&
)来进行条件渲染。在JavaScript中,&&
运算符在第一个操作数为真时返回第二个操作数,否则返回第一个操作数。在React的JSX语法中,这种写法常用于条件渲染。
user.uid
:表示当前登录用户的ID。item.user.uid
:表示评论作者的ID。
这段代码的逻辑是:如果user.uid
等于item.user.uid
(即当前用户是评论的作者),则渲染<span>
标签及其内容,否则不渲染任何内容。
<span>
标签
<spanclassName="delete-btn"onClick={() => onDelete(item.rpid)}
>删除
</span>
如果条件成立,这段代码将渲染一个<span>
标签,具体解析如下:
className="delete-btn"
className
:设置元素的CSS类。这里将<span>
标签的CSS类设置为"delete-btn"
,以便应用相应的样式。
onClick={() => onDelete(item.rpid)}
onClick
:React中的事件处理属性,用于处理点击事件。{() => onDelete(item.rpid)}
:这是一个箭头函数,点击时会调用onDelete
函数,并传递当前评论的ID(item.rpid
)作为参数。
当用户点击这个<span>
标签时,onDelete
函数会被调用,传递的rpid
参数用于识别需要删除的评论。
箭头函数为什么设计成这样
- 避免立即执行
如果直接写成 onClick={onDelete(item.rpid)}
,会导致在渲染时立即执行 onDelete
函数,而不是在点击时执行。这样会立即删除评论,而不是等待用户点击删除按钮。因此,需要使用一个函数包装起来,确保 onDelete(item.rpid)
只有在点击事件发生时才执行。
- 创建事件处理函数
通过定义一个箭头函数 () => onDelete(item.rpid)
,我们创建了一个新的函数。当点击事件发生时,这个函数会被调用,然后再调用 onDelete
并传递参数 item.rpid
。
- 结合完整示例
- 如果当前登录用户(
user.uid
)与评论的作者(item.user.uid
)是同一个人,则渲染一个带有"delete-btn"
类的<span>
标签,显示“删除”文本。 - 点击“删除”按钮时,调用
onDelete
函数,并传递当前评论的ID(item.rpid
)以删除该评论。
六、完整代码示例
以下是包含所有上述功能的完整代码示例:
import { useState } from 'react';
import './App.scss';
import avatar from './images/bozai.png';
import orderBy from 'lodash/orderBy';const defaultList = [{rpid: 3,user: {uid: '13258165',avatar: '',uname: '周杰伦',},content: '哎哟,不错哦',ctime: '10-18 08:15',like: 88,},{rpid: 2,user: {uid: '36080105',avatar: '',uname: '许嵩',},content: '我寻你千百度 日出到迟暮',ctime: '11-13 11:29',like: 88,},{rpid: 1,user: {uid: '30009257',avatar,uname: '黑马前端',},content: '学前端就来黑马',ctime: '10-19 09:00',like: 66,},
];const user = {uid: '30009257',avatar,uname: '黑马前端',
};const tabs = [{ type: 'hot', text: '最热' },{ type: 'time', text: '最新' },
];const App = () => {const [activeTab, setActiveTab] = useState('hot');const [list, setList] = useState(defaultList);const onDelete = rpid => {setList(list.filter(item => item.rpid !== rpid));};const onToggle = type => {setActiveTab(type);let newList;if (type === 'time') {newList = orderBy(list, 'ctime', 'desc');} else {newList = orderBy(list, 'like', 'desc');}setList(newList);};return (<div className="app"><div className="reply-navigation"><ul className="nav-bar"><li className="nav-title"><span className="nav-title-text">评论</span><span className="total-reply">{list.length}</span></li><li className="nav-sort">{tabs.map(item => {return (<divkey={item.type}className={item.type === activeTab ? 'nav-item active' : 'nav-item'}onClick={() => onToggle(item.type)}>{item.text}</div>);})}</li></ul></div><div className="reply-wrap"><div className="box-normal"><div className="reply-box-avatar"><div className="bili-avatar"><img className="bili-avatar-img" src={avatar} alt="用户头像" /></div></div><div className="reply-box-wrap"><textareaclassName="reply-box-textarea"placeholder="发一条友善的评论"/><div className="reply-box-send"><div className="send-text">发布</div></div></div></div><div className="reply-list">{list.map(item => {return (<div key={item.rpid} className="reply-item"><div className="root-reply-avatar"><div className="bili-avatar"><imgclassName="bili-avatar-img"src={item.user.avatar}alt=""/></div></div><div className="content-wrap"><div className="user-info"><div className="user-name">{item.user.uname}</div></div><div className="root-reply"><span className="reply-content">{item.content}</span><div className="reply-info"><span className="reply-time">{item.ctime}</span><span className="reply-time">点赞数:{item.like}</span>{user.uid === item.user.uid && (<spanclassName="delete-btn"onClick={() => onDelete(item.rpid)}>删除</span>)}</div></div></div></div>);})}</div></div></div>);
};export default App;
源代码来源
相关文章:

【React】通过实际示例详解评论列表渲染和删除
文章目录 一、引言二、初始状态与状态更新1. 使用useState钩子管理状态2. 评论列表的初始数据 三、列表渲染的实现1. list.map(item > { ... })2. return 语句3. JSX 语法4. 为什么这样设计5. 完整解读 四、列表项的唯一标识1. key 的作用2. key 的用法3. 可以没有 key 吗&a…...
React 中 useState 语法详解
1. 语法定义 const [state, dispatch] useState(initData) state:定义的数据源,可视作一个函数组件内部的变量,但只在首次渲染被创造。 dispatch:改变state的函数,推动函数渲染的渲染函数,有非函数和函…...

(面试必看!)一些和多线程相关的面试考点
文章导读 引言考点1. CAS 指令(重点)一、什么是CAS二、CAS 的优点三、CAS 的缺点四、ABA问题五、相关面试题 考点2. 信号量(semaphore)一、基本概念二、信号量的主要操作三、信号量的应用四、相关面试题 考点3、CountDownLatch 类…...

从零到一使用 Ollama、Dify 和 Docker 构建 Llama 3.1 模型服务
本篇文章聊聊,如何使用 Ollama、Dify 和 Docker 来完成本地 Llama 3.1 模型服务的搭建。 如果你需要将 Ollama 官方不支持的模型运行起来,或者将新版本 llama.cpp 转换的模型运行起来,并且想更轻松的使用 Dify 构建 AI 应用,那么…...

【React】详解 React Router
文章目录 一、React Router 的基本概念1. 什么是 React Router?2. React Router 的主要特性 二、React Router 的核心组件1. BrowserRouter2. Route3. Link4. Switch 三、React Router 的使用方法1. 安装 React Router2. 定义路由组件3. 配置路由4. 启动应用 四、Re…...

微软蓝屏”事件暴露了网络安全哪些问题?
📢博客主页:https://blog.csdn.net/2301_779549673 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📢本文由 JohnKi 原创,首发于 CSDN🙉 📢未来很长&#…...

upload-labs靶场练习
文件上传函数的常见函数: 在PHP中,文件上传涉及的主要函数包括move_uploaded_file(), is_uploaded_file(), get_file_extension(), 和 mkdir()。这些函数共同协作,使得用户可以通过HTTP POST方法上传文件,并在服务器上保存…...

java使用hutool工具判断ip或者域名是否可用,java使用ping判断ip或者域名是否可用
1.导入hutool工具 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency>2.复制以下代码直接运行 import cn.hutool.core.net.NetUtil;public class Test {p…...

apache2和httpd web服务器
apache2和httpd web服务器 apache2和httpd web服务器是啥apache是软件基金会apache2是一个web服务httpd和apache2是同一个东西,但是不同linux发行版中叫法不一样。就是同一个东西,但是看上去有一些不一样。 apache2和httpd web服务器是啥 apache是软件基…...

基于多种机器学习的豆瓣电影评分预测与多维度可视化【可加系统】
有需要本项目的代码或文档以及全部资源,或者部署调试可以私信博主 在本研究中,我们采用Python编程语言,利用爬虫技术实时获取豆瓣电影最新数据。通过分析豆瓣网站的结构,我们设计了一套有效的策略来爬取电影相关的JSON格式数据。…...

Linux系统配置STM32的开发环境(代码编辑,编译,下载调试)
常见的stm32开发都是直接使用keil-MDK工具的,这是个集成开发环境,包含了代码编辑,编译,下载,调试,等功能,而且keil还是个图形化操作工具,直接可以点击图标案件就可以实现编译下载啥的…...
每日一题——第三十五题
题目:有一个文本文件numbers.txt,其中有20个整数,每个整数占一行,编写程序将这些整数从小到大顺序排好后,重新写入到该文件中, 要求排序前和排序后都要输出该文件的内容。 #include<stdio.h> #inclu…...

Echarts 柱状图实现同时显示百分比+原始值+汇总值
原始效果:柱状图 二开效果: 核心逻辑 同时显示百分比和原始值 label: {show: true,position: inside,formatter: (params) > {const rawValue rawData[params.seriesIndex][params.dataIndex];const percentage Math.round(params.value * 1000) / …...

嵌入式学习Day13---C语言提升
目录 一、二级指针 1.1.什么是二级指针 2.2.使用情况 2.3.二级指针与数组指针 二、指针函数 2.1.含义 2.2.格式 2.3.注意 2.4.练习 三、函数指针 3.1.含义 3.2.格式 3.3.存储 3.4.练习 编辑 四、void*指针 4.1.void缺省类型 4.2.void* 4.3.格式 4.4.注…...
Mysql随记
1.对表mysql.user执行DML语句(数据操作语言),那么此时磁盘数据较新,需要手动执行flush privileges 语句来覆盖内存中的授权数据。其他的DDL(数据操作语言),DQL(数据查询语言),DCL(数…...
wire和reg的区别
在 Verilog 中,wire 和 reg 是两种不同的数据类型,用于表示信号或变量。它们在 Verilog 中的使用场景和行为有一些区别: ### wire: - wire 类型用于连接组合逻辑电路中的信号,表示电路中的连线或信号传输线。 - wire …...

c语言第四天笔记
关于 混合操作,不同计算结果推理 第一种编译结果: int i 5; int sum (i) (i) 6 7 13 第二种编译结果: int i 5; int sum (i) (i) 6 7 7 7 前面的7是因为后面i的变化被影响后,重新赋值 14 第一种编译结果ÿ…...
Hive——UDF函数:高德地图API逆地理编码,实现离线解析经纬度转换省市区(离线地址库,非调用高德API)
文章目录 1. 需求背景数据现状业务需求面临技术问题寻求其他方案 2. 运行环境软件版本Maven依赖 3. 获取离线地址库4. Hive UDF函数实现5. 创建Hive UDF函数6. 参考 1. 需求背景 数据现状 目前业务系统某数据库表中记录了约3亿条用户行为数据,其中两列记录了用户触…...
深入解析PHP框架:Symfony框架的魅力与优势
嘿,PHP开发者们!今天我们要聊一聊PHP世界中的一颗闪亮明星——Symfony框架。无论是初学者还是经验丰富的开发者,Symfony都为大家提供了强大的工具和灵活的特性。那就跟着我一起,来探索这个强大的PHP框架吧! 一、什么是…...

Go语言实战:基于Go1.19的站点模板爬虫技术解析与应用
一、引言 1.1 爬虫技术的背景与意义 在互联网高速发展的时代,数据已经成为新的石油,而爬虫技术则是获取这种“石油”的重要工具。爬虫,又称网络蜘蛛、网络机器人,是一种自动化获取网络上信息的程序。它广泛应用于搜索引擎、数据分…...

国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...

深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...