React笔记-渲染列表Key(五)

SpicyPeper / 2023-05-09 / 原文

React学习笔记-渲染列表Key(五)

渲染列表需要添加key属性

import React from "react"

export default class LearnKey extends React.Component {

  state = {
    infos : [
      {name : 'Bob', age : 18},
      {name : 'kitty', age : 20},
      {name : 'sam', age : 22}
    ]
  }
  addTom() {
    this.setState({
      infos : [
        ...this.state.infos,
        {name : 'tom', age : 24}
      ]
    }
    )
  }
  del(index) {
    this.state.infos.splice(index, 1);
    this.setState({infos : this.state.infos});
  }

  render () {
    return (
      <div>
        key可以用来追踪列表里的元素哪些被修改了 需要保证key的唯一性 同层key不能重复
        <button onClick={() => this.addTom()}>添加 tom</button>
        <div>{this.state.infos.map((item, index) => (
          // 直接使用index作为key值 一旦修改某一项导致index变动 导致所有index变化的标签都会重新渲染(key改变组件会重新渲染)
          <div key={index}>
            {'name -->' + item.name + ', age -->' + item.age}
            <button onClick={() => this.del(index)}>删除</button>
          </div>
        ))}</div>

        <button onClick={() => this.addTom()}>添加 tom</button>
        <div>{this.state.infos.map((item, index) => (
          // 使用item.name不会因为删除某一项而被改变 其他标签不会重新渲染
          <div key={item.name}>
            {'name -->' + item.name + ', age -->' + item.age}
            <button onClick={() => this.del(index)}>删除</button>
          </div>
        ))}</div>
      </div>
    )
  }
}