不仅仅在数组生成组件上,其他地方也可以使用key,主要是react利用key来区分组件的,相同的key表示同一个组件,react不会重新销毁创建组件实例,只可能更新;key不同,react会销毁已有的组件实例,重新创建组件新的实例。
{ this.state.type ? <div><Son_1/><Son_2/></div> : <div><Son_2/><Son_1/></div> }
例如上面代码中,this.state.type的值改变时,原Son_1和Son2组件的实例都将会被销毁,并重新创建Son_1和Son_2组件新的实例,不能继承原来的状态,其实他们只是互换了位置。为了避免这种问题,我们可以给组件加上key。
{ this.state.type ? <div><Son_1 key="1"/><Son_2 key="2"/></div> : <div><Son_2 key="2" /><Son_1 key="1"/></div> }
这样,this.state.type的值改变时,Son_1和Son2组件的实例没有重新创建,react只是将他们互换位置。