key的作用就是更新组件时判断两个节点是否相同，相同就复用，不相同则删除旧的 创建新的节点
为何感觉带key比不带key性能消耗大呢？
正因为带唯一key时每次更新都找不到可复用的节点，不但要销毁和创建Vnode,在DOM添加移除节点对性能可能影响更大，而不带key时节点能复用省去了销毁和创建节点的开销，只需要修改DOM节点的文本内容
那为何官网推荐带key呢？
带key这种模式只用于无状态组件，对于大多数还是有状态组件，列表都有自己的状态
如一个tab切换。不带key的话当前tab和其他tab保持一致的样式，而不会切换为当前有的状态，这是因为不带key直接复用的样式，只改变dom节点的文本内容而已，此时产生的Bug需要带key 来解决，以避免原地复用的副作用，强制组件的更新，带key更多的时进行diff算法，省去一部分逻辑，更高效的更行虚拟dom列表，因此性能也会更好。
有状态组件：(stateful components)
import React,{Component} from 'react';export default class Bottom extends Component{constructor(props){super(props);this.sayHi = this.sayHi.bind(this)//记得绑定this，否则this指向可能会出错}sayHi(){let {name} = this.propsconsole.log(`Hi ${name}`);}render(){let {name} = this.propslet{sayHi} =this;return(<div><h1>{`Hello, ${name}`}</h1><button onClick ={sayHi}>Say Hi</button></div>)}}无状态组件
它是一种函数式组件，没有state, 接收Props，无生命周期，渲染DOM，而不关注其他逻辑
import React,{Component} from 'react';export default function Bottom(props){let{name} = propsconst sayHi = () => {console.log(`Hi ${name}`);}return (<div><h1>Hello, {name}</h1><button onClick ={sayHi}>Say Hi</button></div>)}