子容器的Key是很重要的
key必须传递给从数组中动态创建的所有组件的一个值。它是一个唯一且固定的id,用来识别DOM中的每个组件,也可以让我们区别它是否是同一个组件。使用key可以确保子容器是可保存而且不需要重复创建的,还可以防止奇怪的事情发生。
key跟效率不是很相关,它更与身份有关系(这间接的使效率更好)。随机的赋值或改变值将不能识别身份Paul O’Shannessy
- 使用对象存在的的唯一值。
- 在父组件定义key,而不是子组件。
//bad
...
render() {
<div key={{item.key}}>{{item.name}}</div>
}
...
//good
<MyComponent key={{item.key}}/>
- 使用数组索引是一个坏习惯
random()
不会起作用
//bad
<MyComponent key={{Math.random()}}/>
- 你可以创建以自己的唯一id。确定这个方法运行速度够快,把它附着到你的对象上。
- 当子组件的数量很大或者包含重量级的组件时,使用key来提高性能。
- 你必须提供key值给ReactCSSTransitionGroup的每个子组件
MEET THE NEW JSTIPS BOOK
You no longer need 10+ years of experience to get your dream job.
Use the 100 answers in this short book to boost your confidence and skills to ace the interviews at your favorite companies like Twitter, Google and Netflix.
GET THE BOOK NOW
MEET THE NEW JSTIPS BOOK
The book to ace the JavaScript Interview.
A short book with 100 answers designed to boost your knowledge and help you ace the technical interview within a few days.
GET THE BOOK NOW