Ract子容器的Key很重要

2018-08-08

key 是必须传递给数组中动态创建的所有子组件的一个值。它是一个唯一且固定的ID，用来识别DOM中的每个组件，也可以让我们来区别它是否是同一个组件。使用key可以确保子容器是可以保存而且不需要重复创建的，还可以防止奇怪的事情发生。

key 跟效率不是很相关，它更身份有关系（这间接的使效率更好）。随机的肤质或改变只讲不能识别身份

  • 使用对象存在的唯一值。
  • 在父组件定义，而不是子组件。
1
2
3
4
5
6
7
8
9
// bad
...
render() {
    <div key={{item.key}}>{{item.name}}</div>
}
...

//good
<MyComponent key={{item.key}} />
  • 使用数组索引是一个坏习惯
  • random() 不会起作用
1
2
//bad 
<MyComponent key={{Math.random()}} />
  • 你可以创建自己的唯一ID，确保这个方法运行的足够快的前提下，将其附着到你的对象上去
  • 当子组件很多或者有很复杂的子组件时，请使用key来提高性能
  • ReactCSSTransitionGroup 的所有子组件都应该使用key
react