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对应的位置不需要重新挂载。