https://gitee.com/arnold_s/my-learning-test/blob/master/20250520_reactTest/01_easyReact/react-basic_pro/src/App_Day1-14.%E8%AF%84%E8%AE%BA%E6%A1%88%E4%BE%8B-%E5%88%A0%E9%99%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0.js文章目录原代码问为什么删除评论是客户端调用过滤评论而不是请求数据库删除然后再从数据库获取最新评论列表呢答当前代码的实现方式本地状态管理两种方式的对比1. **本地过滤方式**当前代码2. **API删除方式**你提到的方式实际项目中的最佳实践总结原代码import./App.scssimportavatarfrom./images/bozai.pngimport{useState}fromreact/** * 评论列表的渲染和操作 * * 1. 根据状态渲染评论列表 * 2. 删除评论 */// 评论列表数据constdefaultList[{// 评论idrpid: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,},]// 当前登录用户信息constuser{// 用户iduid:30009257,// 用户头像avatar,// 用户昵称uname:黑马前端,}/** * 导航 Tab 的渲染和操作 * * 1. 渲染导航 Tab 和高亮 * 2. 评论列表排序 * 最热 喜欢数量降序 * 最新 创建时间降序 */// 导航 Tab 数组consttabs[{type:hot,text:最热},{type:time,text:最新},]// 2、使用useEffect 监听评论列表数据的变化// 3、使用useRef 管理评论列表的滚动位置// 4、使用useCallback 管理评论列表的滚动位置// 5、使用useMemo 管理评论列表的滚动位置// 6、使用useContext 管理评论列表的滚动位置// 7、使用useReducer 管理评论列表的滚动位置constApp(){// 渲染评论列表// 1、使用useState 管理评论列表数据const[commentList,setCommentList]useState(defaultList)// 删除评论consthandleDelete(rpid){// 过滤掉要删除的评论// 使用filter 方法过滤掉要删除的评论// filter 方法会返回一个新数组新数组中不包含要删除的评论// 新数组中的元素是原数组中除了要删除的评论以外的所有元素// 使用setCommentList 方法更新评论列表数据setCommentList(commentList.filter(itemitem.rpid!rpid))}return(div classNameapp{/* 导航 Tab */}div classNamereply-navigationul classNamenav-barli classNamenav-titlespan classNamenav-title-text评论/span{/* 评论数量 */}span classNametotal-reply{10}/span/lili classNamenav-sort{/* 高亮类名 active */}span classNamenav-item最新/spanspan classNamenav-item最热/span/li/ul/divdiv classNamereply-wrap{/* 发表评论 */}div classNamebox-normal{/* 当前用户头像 */}div classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-imgsrc{avatar}alt用户头像//div/divdiv classNamereply-box-wrap{/* 评论框 */}textarea classNamereply-box-textareaplaceholder发一条友善的评论/{/* 发布按钮 */}div classNamereply-box-senddiv classNamesend-text发布/div/div/div/div{/* 评论列表 */}div classNamereply-list{/* 评论项 */}{commentList.map(item(div key{item.rpid}classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimg classNamebili-avatar-imgaltsrc{item.user.avatar||https://cdn.jsdelivr.net/gh/twitter/twemoji14.0.2/assets/72x72/1f464.png}//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{/* 删除按钮 */}{/* 判断是否是当前登录用户 */}{item.user.uiduser.uid(span classNamedelete-btnonClick{()handleDelete(item.rpid)}删除/span)}/div/div/div/div))}/div/div/div)}exportdefaultApp问为什么删除评论是客户端调用过滤评论而不是请求数据库删除然后再从数据库获取最新评论列表呢答这是一个很好的问题让我来解释一下这两种删除评论的实现方式当前代码的实现方式本地状态管理consthandleDelete(rpid){setCommentList(commentList.filter(itemitem.rpid!rpid))}这种方式是客户端状态管理直接修改本地的状态数据。两种方式的对比1.本地过滤方式当前代码优点响应速度快- 无需等待网络请求节省服务器资源- 减少API调用次数用户体验好- 立即反馈无加载等待缺点⚠️数据不同步- 只是前端展示删除后端数据库还存在页面刷新后恢复- 数据会重新从服务器加载2.API删除方式你提到的方式consthandleDeleteasync(rpid){try{// 1. 调用删除APIawaitdeleteCommentAPI(rpid)// 2. 重新获取评论列表constnewListawaitgetCommentsAPI()setCommentList(newList)}catch(error){console.error(删除失败:,error)}}优点✅数据真实同步- 前后端数据一致数据持久化- 删除后数据真正消失缺点响应较慢- 需要等待两次网络请求服务器负担重- 每次操作都需要API调用实际项目中的最佳实践在真实项目中通常会采用混合方式consthandleDeleteasync(rpid){try{// 1. 立即更新UI乐观更新setCommentList(commentList.filter(itemitem.rpid!rpid))// 2. 后台调用删除APIawaitdeleteCommentAPI(rpid)// 3. 如果删除失败恢复UI状态}catch(error){// 恢复删除的评论setCommentList(originalList)alert(删除失败请重试)}}总结当前代码可能是学习Demo- 专注于React状态管理学习原型阶段- 还未连接后端服务离线应用- 数据只在本地存储在实际生产环境中建议使用乐观更新的方式既保证用户体验又确保数据一致性