1,刪除原來(lái)的數(shù)組，再添加3個(gè)元素，分別設(shè)為2,3,0。不需要使用key來(lái)標(biāo)識(shí)元素是否存在，這很明顯是低效的，而且這會(huì)帶來(lái)副作用(生命周期里init,didmount,willumount都會(huì)調(diào)用)，，

2，直接在后面添加一個(gè)元素，值分別設(shè)為2,3,0.沒(méi)有key,用數(shù)組下標(biāo)，最后一個(gè)元素0是新增的，需要調(diào)用組件的（init,didmount），didmount里接收的是0并向后端發(fā)請(qǐng)求

3，按值查找，對(duì)0保持不變，刪除1，新增2，3，這符合我們想要的邏輯，但是我們還沒(méi)有告訴react值是什么，List里可能是一個(gè)復(fù)雜的組件，所以react提供了一個(gè)key,讓我們自己設(shè)置這個(gè)元素什么時(shí)候需要重新掛載。

下面看其中一個(gè)應(yīng)用場(chǎng)景
點(diǎn)擊界面上的按鈕add item，在下面的列表增加一個(gè)一條記錄，記錄掛載時(shí)在控制臺(tái)輸出自身的ID，數(shù)據(jù)的數(shù)組是按時(shí)間正序，視圖按時(shí)間逆序顯示
import React, { Component } from 'react';
class Item extends Component {
componentDidMount(){
console.log(this.props.text);
}
render(){
return ( <li>{this.props.text}</li>)
}
};

class App extends Component {
constructor (){
super()
this.state={arr:[0,1]};
this.addItem=this.addItem.bind(this)
}
addItem(){
var arr=this.state.arr.slice(0);
arr.push(arr.length);
this.setState({arr:arr});
}
render() {
var arr=this.state.arr.slice(0);
arr.reverse();
return (
<div className="App">
<button onClick={this.addItem}>add item</button>
<ul>
{arr.map((item,index)=>{
return <Item key={index} text={item}/>
})}
</ul>
</div>
);
}
}

export default App;

當(dāng)APP的render里不設(shè)置key 或者key={index} 時(shí)，每次新掛載的節(jié)點(diǎn)都是0（其他節(jié)點(diǎn)能在willreceiveprops中接檢測(cè)到改變），因?yàn)槟嫘蛑螅詈笠粋€(gè)元素是0，而這個(gè)元素的key之前是沒(méi)有的，所以要新增節(jié)點(diǎn)。要實(shí)現(xiàn)目標(biāo)，需要通過(guò)在App的render中設(shè)置key={arr.length-index}(因?yàn)楸纠臄?shù)組簡(jiǎn)單，設(shè)key={item}也可以)，告訴react對(duì)應(yīng)的位置不需要重新掛載。