找人做企业网站注意啥,帝国cms手机网站教程,国外商业网站建设,广告联盟平台文章目录 一、引言二、初始状态与状态更新1. 使用useState钩子管理状态2. 评论列表的初始数据 三、列表渲染的实现1. list.map(item { ... })2. return 语句3. JSX 语法4. 为什么这样设计5. 完整解读 四、列表项的唯一标识1. key 的作用2. key 的用法3. 可以没有 key 吗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 classNamereply-list{list.map(item {return (div key{item.rpid} classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgsrc{item.user.avatar}alt//div/divdiv classNamecontent-wrap{/* 用户名 */}div classNameuser-infodiv classNameuser-name{item.user.uname}/div/div{/* 评论内容 */}div classNameroot-replyspan classNamereply-content{item.content}/spandiv classNamereply-info{/* 评论时间 */}span classNamereply-time{item.ctime}/span{/* 点赞数 */}span classNamereply-time点赞数:{item.like}/span{user.uid item.user.uid (spanclassNamedelete-btnonClick{() onDelete(item.rpid)}删除/span)}/div/div/div/div)})}
/div1. 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} classNamereply-item{/* 列表项的内容 */}
/divkey{item.rpid}key 属性是 React 中用于唯一标识每个列表项的标识符有助于优化列表的渲染和更新。classNamereply-itemclassName 是 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} classNamereply-item{/* 列表项的内容 */}/div)
})}list.map(item { ... })对 list 数组中的每个元素 item 执行回调函数。return返回一个包含评论项的 JSX 元素。div key{item.rpid} classNamereply-item.../div为每个评论项生成一个 div 元素并指定唯一的 key 属性和 CSS 类名。
四、列表项的唯一标识
在渲染列表时确保每个列表项都有一个唯一的key属性是至关重要的。这里使用评论的rpid作为key
div key{item.rpid} classNamereply-item1. key 的作用
当 React 渲染列表时它需要一个唯一的标识符来跟踪每个元素以便在元素发生变化时可以高效地重新渲染和更新。这主要体现在以下几个方面
元素的识别
key 帮助 React 识别哪些元素发生了变化、被添加或被移除。例如当我们有一个列表并对其进行重新排序时key 使 React 能够知道哪些项是相同的哪些项是新增的或删除的。
提高渲染性能
有了 keyReact 可以根据变化最小化 DOM 操作。例如如果一个列表项的位置发生了变化而它的 key 没有变React 只会移动 DOM 元素而不是销毁旧元素并创建新元素这大大提高了性能。
防止潜在的 Bug
没有 key 或 key 不唯一可能导致一些潜在的 Bug。例如输入框中的内容可能会丢失组件的状态可能会出错等。key 保证了每个元素在其父元素中都是独一无二的这样 React 就可以正确地维护和更新组件的状态。
2. key 的用法
在列表中使用 key 的典型方式如下
div key{item.rpid} classNamereply-item{/* 列表项的内容 */}
/div这里的 item.rpid 是一个唯一标识符对于每个列表项来说都是独一无二的。
3. 可以没有 key 吗
不能没有 key。如果不提供 keyReact 会发出警告告知 key 是必要的。即使不提供 key 的代码能够工作它也会导致性能下降和潜在的 Bug。因此始终建议在列表渲染中为每个元素提供一个唯一的 key。
4. 示例代码中的 key
代码中key 的用法如下
{list.map(item {return (div key{item.rpid} classNamereply-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 (spanclassNamedelete-btnonClick{() 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 标签
spanclassNamedelete-btnonClick{() onDelete(item.rpid)}
删除
/span如果条件成立这段代码将渲染一个span标签具体解析如下
classNamedelete-btn
className设置元素的CSS类。这里将span标签的CSS类设置为delete-btn以便应用相应的样式。
onClick{() onDelete(item.rpid)}
onClickReact中的事件处理属性用于处理点击事件。{() onDelete(item.rpid)}这是一个箭头函数点击时会调用onDelete函数并传递当前评论的IDitem.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函数并传递当前评论的IDitem.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 classNameappdiv classNamereply-navigationul classNamenav-barli classNamenav-titlespan classNamenav-title-text评论/spanspan classNametotal-reply{list.length}/span/lili classNamenav-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/divdiv classNamereply-wrapdiv classNamebox-normaldiv classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-img src{avatar} alt用户头像 //div/divdiv classNamereply-box-wraptextareaclassNamereply-box-textareaplaceholder发一条友善的评论/div classNamereply-box-senddiv classNamesend-text发布/div/div/div/divdiv classNamereply-list{list.map(item {return (div key{item.rpid} classNamereply-itemdiv classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgsrc{item.user.avatar}alt//div/divdiv classNamecontent-wrapdiv classNameuser-infodiv classNameuser-name{item.user.uname}/div/divdiv classNameroot-replyspan classNamereply-content{item.content}/spandiv classNamereply-infospan classNamereply-time{item.ctime}/spanspan classNamereply-time点赞数:{item.like}/span{user.uid item.user.uid (spanclassNamedelete-btnonClick{() onDelete(item.rpid)}删除/span)}/div/div/div/div);})}/div/div/div);
};export default App;源代码来源
