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>
    )
  }
}

使用index作為Key

使用item.name作為Key