React学习笔记12-循环渲染
1.React学习笔记01-React的基本认识2.React学习笔记02-创建React项目3.React学习笔记03-编写第一个react应用程序4.React学习笔记04-JSX语法5.React学习笔记05-类组件6.React学习笔记06-函数式组件7.React学习笔记07-组件嵌套8.React学习笔记08- 组件的样式9.React学习笔记09- 事件处理10.React学习笔记10- Ref的应用11.React学习笔记11-状态(state)
12.React学习笔记12-循环渲染
13.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)14.React学习笔记14-dangerousSetinnerHtml指令15.React学习笔记15-setState同步异步问题16.React学习笔记16-属性props17.React学习笔记17-属性VS状态18.React学习笔记18-非受控组件19.React学习笔记19-受控组件20.React学习笔记20-父子通信(子传父)21.React学习笔记21-非父子通信(状态提升)22.React学习笔记22-订阅发布模式23.React学习笔记23-非父子通信(订阅发布模式)在vue中我们一般是通过v-for指令来进行循环渲染的,但react中没有封装相关指令供我们调用
在react中我们可以通过数组的map方法来进行数据的循环渲染
import React, { Component } from 'react' export default class App extends Component { constructor() { super() this.state = { list: [ '1111', '2222', '3333' ] } } render() { return ( <div> <ul> {this.state.list.map((item, index) => <li key={index}>{item}</li> )} </ul> <button onClick={ () => { this.state.list.push('4444') this.setState({ list: this.state.list }) } }>add</button> </div> ) } } /* 为了列表的复用和重排,设置key值提高性能 理想key,不重复的id */ /* 原生JS-map */ var list = ["aa", "bb", "cc"] var newlist = list.map(item => `<li>${item}</li>` ) console.log(newlist)
为了实现列表的复用和重排的效率我们需要给每一个循环渲染出来的dom设置一个唯一标识key
在虚拟dom进行对比时可以通过这个key直接让key相同的dom进行比较实现每个dom点对点的对比,而不需要进行双层循环。
让每个dom都跟所有的dom进行对比。提高了虚拟dom更新的速度
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix