React学习笔记12-循环渲染

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-20

12.React学习笔记12-循环渲染2023-10-20

13.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

在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更新的速度