【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">
            <img
              className="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 && (
                <span
                  className="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 && (
  <span
    className="delete-btn"
    onClick={() => onDelete(item.rpid)}
  >
    删除
  </span>
)}
  1. 条件渲染
{user.uid === item.user.uid && ( ... )}

这一部分使用了逻辑与运算符（&&）来进行条件渲染。在JavaScript中，&&运算符在第一个操作数为真时返回第二个操作数，否则返回第一个操作数。在React的JSX语法中，这种写法常用于条件渲染。

  • user.uid：表示当前登录用户的ID。
  • item.user.uid：表示评论作者的ID。

这段代码的逻辑是：如果user.uid等于item.user.uid（即当前用户是评论的作者），则渲染<span>标签及其内容，否则不渲染任何内容。

  1. <span> 标签
<span
  className="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。

  1. 结合完整示例
  • 如果当前登录用户（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 (
                <div
                  key={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">
            <textarea
              className="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">
                    <img
                      className="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 && (
                        <span
                          className="delete-btn"
                          onClick={() => onDelete(item.rpid)}
                        >
                          删除
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default App;

源代码来源

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/869876.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【React】详解样式控制：从基础到进阶应用的全面指南

【React】详解样式控制：从基础到进阶应用的全面指南

文章目录 一、内联样式1. 什么是内联样式&#xff1f;2. 内联样式的定义3. 基本示例4. 动态内联样式 二、CSS模块1. 什么是CSS模块&#xff1f;2. CSS模块的定义3. 基本示例4. 动态应用样式 三、CSS-in-JS1. 什么是CSS-in-JS&#xff1f;2. styled-components的定义3. 基本示例…
阅读更多...
github的Codespaces是什么

github的Codespaces是什么

目录 github的Codespaces是什么 一、定义与功能 二、特点与优势 三、工作原理 四、使用场景与限制 github的Codespaces是什么 GitHub的Codespaces是一个基于云的即时开发环境，它利用容器技术为开发者提供一个完全配置好的开发环境，以便他们能够直接在浏览器或通过Visua…
阅读更多...
【CI/CD】docker + Nginx自动化构建部署

【CI/CD】docker + Nginx自动化构建部署

CI/CD是什么 CI/CD 是持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09;的缩写&#xff0c;它们是现代软件开发中用于自动化软件交付过程的实践。 1、…
阅读更多...
Spark实时（五）：InputSource数据源案例演示

Spark实时（五）：InputSource数据源案例演示

文章目录 InputSource数据源案例演示 一、​​​​​​​File Source 1、读取text文件 2、读取csv文件 3、读取json文件 二、Socket Source 三、Rate Source InputSource数据源案例演示 在Spark2.0版本之后&#xff0c;DataFrame和Dataset可以表示静态有边界的数据&am…
阅读更多...
【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案 一&#xff0c; 文章简介二&#xff0c;硬件平台构建2.1 音频源板2.2 音频收发板2.3 双板硬件连接 三&#xff0c;软件方案与软件实现3.1 方案实现3.2 软件代码实现3.2.1 4路I2S接收3.2.2 I2S DMA pingpong配置3.2.3 音频数…
阅读更多...
Spring源码学习笔记之@Async源码

Spring源码学习笔记之@Async源码

文章目录 一、简介二、异步任务Async的使用方法2.1、第一步、配置类上加EnableAsync注解2.2、第二步、自定义线程池2.2.1、方法一、不配置自定义线程池使用默认线程池2.2.2、方法二、使用AsyncConfigurer指定线程池2.2.3、方法三、使用自定义的线程池Excutor2.2.4、方法四、使用…
阅读更多...
算法-----递归~~搜索~~回溯（宏观认识）

算法-----递归~~搜索~~回溯（宏观认识）

目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度&#xff08;dfs&#xff09;优先遍历&优先搜索 5.2宽度&#xff08;bfs&#xff09;优先遍历&优先搜索 6.回溯 1.什…
阅读更多...
《0基础》学习Python——第二十三讲__网络爬虫/＜6＞爬取哔哩哔哩视频

《0基础》学习Python——第二十三讲__网络爬虫/＜6＞爬取哔哩哔哩视频

一、在B站上爬取一段视频&#xff08;B站视频有音频和视频两个部分&#xff09; 1、获取URL 注意&#xff1a;很多平台都有反爬取的机制&#xff0c;B站也不例外 首先按下F12找到第一条复制URL 2、UA伪装&#xff0c;下列图片中&#xff08;注意代码书写格式&#xff09; 3、Co…
阅读更多...
redis的使用场景和持久化方式

redis的使用场景和持久化方式

redis的使用场景 热点数据的缓存。热点&#xff1a;频繁读取的数据。限时任务的操作&#xff1a;短信验证码。完成session共享的问题完成分布式锁。 redis的持久化方式 什么是持久化&#xff1a;把内存中的数据存储到磁盘的过程&#xff0c;同时也可以把磁盘中的数据加载到内存…
阅读更多...
react开发-配置开发时候@指向SRC目录

react开发-配置开发时候@指向SRC目录

这里写目录标题 配置开发时候指向SRC目录VScode编辑器给出提示总体1.配置react的 2.配置Vscode的1.配置react的2,配置VSCode的提示支持 配置开发时候指向SRC目录VScode编辑器给出提示 总体1.配置react的 2.配置Vscode的 1.配置react的 1. 我么需要下载一个webpack的插件 这样…
阅读更多...
河南萌新联赛2024第（二）场：南阳理工学院

河南萌新联赛2024第（二）场：南阳理工学院

文章目录 链接 A. 国际旅行Ⅰ题意与思路代码 D.A*BBBB题意与思路代码 F.水灵灵的小学弟题意与思路代码 H.狼狼的备忘录题意与思路代码 I.重生之zbk要拿回属于他的一切题意与思路代码 J.这是签到题意与思路代码总结 链接 链接 A. 国际旅行Ⅰ 题意与思路 这是一个签到题&…
阅读更多...
[红明谷CTF 2021]write_shell 1

[红明谷CTF 2021]write_shell 1

目录 代码审计check()$_GET["action"] ?? "" 解题 代码审计 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){// if(preg_match("/| |_||p…
阅读更多...
如何使用C#快速创建定时任务

如何使用C#快速创建定时任务

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17511040.html 使用Windows的计划任务功能可以创建定时任务。 使用schtasks.exe可以对计划任务进行管理&#xff0c;而不需要编写额外代码 这里掌握schtasks /CREATE 的几个核心参数就可以快速创建计划任务 /SC …
阅读更多...
一些和颜色相关网站

一些和颜色相关网站

1.中国传统色 2.网页颜色选择器 3.渐变色网站 4.多风格色卡生成 5.波浪生成 6.半透明磨砂框 7.色卡组合
阅读更多...
OAK相机支持的图像传感器有哪些？

OAK相机支持的图像传感器有哪些？

相机支持的传感器 在 RVC2 上&#xff0c;固件必须具有传感器配置才能支持给定的相机传感器。目前&#xff0c;我们支持下面列出的相机传感器的开箱即用&#xff08;固件中&#xff09;传感器配置。 名称 分辨率 传感器类型 尺寸 最大 帧率 IMX378 40563040 彩色 1/2.…
阅读更多...
nginx通过nginx_upstream_check_module实现后端健康检查

nginx通过nginx_upstream_check_module实现后端健康检查

1、简介说明 nginx是常用的反向代理和负载均衡服务&#xff0c;具有强大并发能力、稳定性、丰富的功能集、低资源的消耗。 nginx自身是没有针对后端节点健康检查的&#xff0c;但是可以通过默认自带的ngx_http_proxy_module 模块和ngx_http_upstream_module模块中的相关指令来完…
阅读更多...
EmlogPro图片本地化插件修复版V2.0

EmlogPro图片本地化插件修复版V2.0

Emlog图片本地化插件V2.0 全新优化升级版&#xff0c;并非emlog官方发布的收费插件&#xff0c;可以快速将文章中的远程图片链接下载到自己的服务器&#xff0c;避免远程站点图片防盗链、跑路等等问题&#xff01; 插件下载&#xff1a;img2local.zip 功能特色&#xff1a; …
阅读更多...
Centos安装、迁移gitlab

Centos安装、迁移gitlab

Centos安装迁移gitlab 一、下载安装二、配置rb修改&#xff0c;起服务。三、访问web&#xff0c;个人偏好设置。四、数据迁移1、查看当前GitLab版本2、备份旧服务器的文件3、将上述备份文件拷贝到新服务器同一目录下&#xff0c;恢复GitLab4、停止新gitlab数据连接服务5、恢复备…
阅读更多...
MySQL SQL 编程练习

MySQL SQL 编程练习

目录 创建表并插入数据 查看表结构 创建触发器 创建INSERT 触发器 创建DELETE 触发器 创建更新触发器 创建存储过程 创建提取emp_new表所有员工姓名和工资的存储过程s1 创建存储过程s2&#xff0c;实现输入员工姓名后返回员工的年龄 创建一个存储过程s3&#xff0c;有2个参数&…
阅读更多...
＜数据集＞AffectNet表情识别数据集＜目标检测＞

＜数据集＞AffectNet表情识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;29752张 标注数量(xml文件个数)&#xff1a;29752 标注数量(txt文件个数)&#xff1a;29752 标注类别数&#xff1a;7 标注类别名称&#xff1a;[anger,contempt,disgust,fear,happy,neutral,sad,surprise] 序号类…
阅读更多...
最新文章

Copyright @ 2022~2023