react 怎样判断应该有key?

Question

react 怎样判断应该有key

Answer 1

1,删除原来的数组，再添加3个元素，分别设为2,3,0。不需要使用key来标识元素是否存在，这很明显是低效的，而且这会带来副作用(生命周期里init,didmount,willumount都会调用)，，

2，直接在后面添加一个元素，值分别设为2,3,0.没有key,用数组下标，最后一个元素0是新增的，需要调用组件的（init,didmount），didmount里接收的是0并向后端发请求

3，按值查找，对0保持不变，删除1，新增2，3，这符合我们想要的逻辑，但是我们还没有告诉react值是什么，List里可能是一个复杂的组件，所以react提供了一个key,让我们自己设置这个元素什么时候需要重新挂载。

下面看其中一个应用场景
点击界面上的按钮add item，在下面的列表增加一个一条记录，记录挂载时在控制台输出自身的ID，数据的数组是按时间正序，视图按时间逆序显示
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;

当APP的render里不设置key 或者key={index} 时，每次新挂载的节点都是0（其他节点能在willreceiveprops中接检测到改变），因为逆序之后，最后一个元素是0，而这个元素的key之前是没有的，所以要新增节点。要实现目标，需要通过在App的render中设置key={arr.length-index}(因为本例的数组简单，设key={item}也可以)，告诉react对应的位置不需要重新挂载。