关于React中组件key不写值、使用数组索引、出现重复key的问题

1. 使用唯一索引作为key:循环渲染子组件，使组件具有唯一性，确定性。插入，删除，重新排序不会重新渲染子组件。

2. 使用index作为key或不指定key(不指定默认使用index并且控制台警告):循环渲染子组件，当第一次渲染时，子组件 列表的 key 属性被赋值为数组索引，如果仅仅在尾部插入一个新的组件，前面组件的索引值并不会被变化，但是，对数据进行了重新排序，数组索引 index 仍然稳定地从 0 开始自增， React 认为组件并没有发生变更。

3. 索引出现重复值：如果有重复值，会导致排序或渲染时复制key相同的项， 删除时只会删除对应key的最后一项数据。

import React, { useState, useEffect } from 'react';
import './index.css';



function App() {
  const [inputList, setList] = useState<any[]>([])
  const [itemValue, addItem] = useState<any>('')

  useEffect(() => {
    setList([22, 11, 33])
  }, [])


  function handleClick() {
    setList([itemValue, ...inputList])
  }
  function handleDelete() {
    if (itemValue) {
      let tempList = inputList.filter(item => {
        return item != itemValue
      })
      console.log(tempList)
      setList([...tempList])
    } else {
      inputList.shift()
      console.log(inputList)
      setList([...inputList])
    }

  }
  function handleSort() {
    inputList.sort()

    setList([...inputList])
  }
  return (
    <div className="App">
      <h3>使用唯一索引作为key:<br />循环渲染子组件，使组件具有唯一性，确定性。
        插入，删除，重新排序不会重新渲染子组件。</h3>
      <h3>使用index作为key或不指定key(不指定默认使用index并且控制台警告):<br />循环渲染子组件，当第一次渲染时，子组件 列表的 key 属性被赋值为数组索引，
        如果仅仅在尾部插入一个新的组件，前面组件的索引值并不会被变化，
        但是，对数据进行了重新排序，数组索引 index 仍然稳定地从 0 开始自增，
        React 认为组件并没有发生变更。
      </h3>
      <h3>索引出现重复值：<br />如果有重复值，会导致排序或渲染时复制key相同的项，
        删除时只会删除对应key的最后一项数据</h3>
      {
        JSON.stringify(inputList)
      }

      <hr />
      输入添加项的值:
      <input type="text" value={itemValue} onChange={(e) => addItem(e.target.value)} />
      <br />
      输入删除项的值:
      <input type="text" value={itemValue} onChange={(e) => addItem(e.target.value)} />
      <hr />
      子组件不指定key
      {
        inputList.length && inputList.map((item, index) => {
          return <div >
            <input type="checkbox" value={item} name='test' />{item}
          </div>
        })
      }
      <hr />
      <hr />
      使用index作为key
      {
        inputList.length && inputList.map((item, index) => {
          return <div key={index}>
            <input type="checkbox" value={item} name='test' />{item}
          </div>
        })
      }
      <hr />
      <hr />
      使用唯一索引作为key
      <br />{JSON.stringify(inputList)}
      {
        inputList.length && inputList.map((item, index) => {
          return <div key={item}>
            <input type="checkbox" value={item} name='test' />{item}
          </div>
        })
      }
      <hr />
      <button onClick={handleClick}>添加项</button>
      <button onClick={handleDelete}>删除项</button>
      <button onClick={handleSort}>排序</button>
    </div>
  );
}

export default App;