javascript

react中子组件的keys很重要

这里所说的key是指当使用数组动态创建组件时需要指定的属性。它是一个唯一并且不变的id，React用来区分每个组件的DOM，并且当和另一个组件比较时，可以知道是不同的组件还是相同的。

使用keys可以确保子组件的重用而不是重新创建，从而避免一些奇怪的事情发生。

Key其实和性能没有多大关系，它更关乎于组件的身份（当然，这会在一定程度上会带来更好的性能）。随机的赋值或者可变的值不能用来作为区分的条件。 Paul O’Shannessy

推荐

  • 使用一个对象中已经存在的唯一的值作为key
  • 在父组件中定义keys，而不是在子组件中
1
2
3
4
5
6
7
8
9
//bad 不好的做法
...
render() {
    <div key={{item.key}}>{{item.name}}</div>
}
...
//good 推荐的做法
<MyComponent key={{item.key}}/>
1
2
//bad
<MyComponent key={{Math.random()}}/>