列表需要加上的属性——key

警告?

在React中使用map等方法产生一堆组件时，如果忘记加上一个属性：key，React会提示如下图所示的警告

只是一个警告而已，没提示报错，我不加可以吧？可以，当然可以，只是你的应用性能也会因此降低，所以React只是警告

影响性能？

diff算法

为什么不加一个key就会影响性能，这是因为React的diff算法，在每次组件更新后，有key的话可以快速帮助React定位被修改的组件，如果不加key，React会默认使用数组的下标作为key，而React不提倡使用数组的下标作为key

不能用数组下标作为key？

我在实习中，刚开始接触React，自己大意了，在code review，我的mentor给我指出了这个问题，下来专门查了资料，能使用数组下标，但会产生一些奇怪的bug，如果数组顺序发生变化，触发diff后将引起浏览器重绘，如果你的组件不会变，那么你可以使用数组的下标作为key，如果会变，那就使用数据的唯一id作为标识，举个例子：

class Hello extends React.Component {
  constructor() {
        super()
      	this.state = {
        data: [
          {
            name: 'a',
            id: 1
          }, 
          {
          	name: 'b',
          	id:2
          },
          {
          	name: 'c'
          }
        ]
    }
  }
  
  revertData = () => {
  	let data = this.state.data
    let newData = [].concat(data)
    newData.push(newData.shift())
	this.setState({data: newData})
  }

  render() {
    let state = this.state
    // 不加key和使用index作为key的效果一样，都会给出警告，如果使用id作为key就不会出现问题
  	return(
    	<ul>
    	  { state.data.map((item, index) => {
        	return <li key={ index }>{ item.name }<input type='input' /></li>
        }) }
        <button onClick={this.revertData}>revert</button>
    	</ul>
    )
  }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('container')
);

赏

谢谢你请我吃糖果

支付宝