react中map的用法是什么-前端问答-PHP中文网

react中map的用法是什么

藏色散人

发布： 2022-12-28 09:52:16

原创

2949人浏览过

react中map的用法：1、使用“{this.state.ToDoList.map((item,index)=>{return <li key={index}>{item}</li>})}”语法循环显示一个数组ToDoList；2、用数组调用“map()”方法，return返回想要得的内容即可。

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react中map的用法是什么？

React 中 map() 方法的使用，以及 key 值的绑定。

1、这里以一个循环显示一个数组ToDoList的例子来展示。

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

登录后复制

2、直接用数组调用 map() 方法，return 返回你想要得的内容，以及绑定 key 值。

        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>

登录后复制

2.1 这里为了方便所以绑定的key值是数组的下标，实际使用中不建议这么做，因为React中Diff算法进行组件对比时，调用的key是数组下标的话，数组的改变，会导致下标对应的数组内容不正确，比如

微信二级防封域名

防封域名方法千千种，我们只做最简单且有用的这一种。微信域名防封是指通过技术手段来实现预付措施，一切说自己完全可以防封的那都是不可能的，一切说什么免死域名不会死的那也是吹牛逼的。我们正在做的是让我们的推广域名寿命更长一点，成本更低一点，效果更好一点。本源码采用 ASP+ACCESS 搭建，由于要用到二级域名，所以需要使用独享云虚机或者云服务器，不支持虚拟主机使用，不支持本地测试。目前这是免费测试版，

查看详情

[1,2,3] ，将1删除之后变成 [2,3],

原来下标0对应的1, 下标1对应2，下标2对应3，改变之后下标0对应的2，下标1对应的3.显然这会对Diff算法进行两个虚拟DOM对比时造成困扰，因为id相同的情况下对应的内容却不一样了，失去了id的意义。因此不建议使用数组下标作为key值。这是根据自己理解写的，可以有些错误的理解，反正大概是这个意思，有错误的地方望指正。

3.运行结果如下图