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

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

3.运行结果如下图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！