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

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

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

下面看其中一個應(yīng)用場景
點擊界面上的按鈕add item，在下面的列表增加一個一條記錄，記錄掛載時在控制臺輸出自身的ID，數(shù)據(jù)的數(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} 時，每次新掛載的節(jié)點都是0（其他節(jié)點能在willreceiveprops中接檢測到改變），因為逆序之后，最后一個元素是0，而這個元素的key之前是沒有的，所以要新增節(jié)點。要實現(xiàn)目標(biāo)，需要通過在App的render中設(shè)置key={arr.length-index}(因為本例的數(shù)組簡單，設(shè)key={item}也可以)，告訴react對應(yīng)的位置不需要重新掛載。