一文讲清楚React中的key值作用与原理

一文讲清楚React中的key值作用与原理

1. 是什么

• 其实React中的key也好，Vue中的key也罢，都是一回事，怎么理解呢，就是身份证号。
• 我们每个人都有身份证号，而且是唯一，不变的，这样我们在任何一个场景中的身份通过身份证号就是唯一确定的
• React中的key就是这个逻辑，他会给他标签、组件等赋值一个唯一key，作为标识
• 那就又问了，标识了有什么用呢
• 问得好，React类似Vue也存在diff算法，key的作用就是比较前后的元素是否是 同一个，从而减少不必要的元素渲染
• 如果 在diff算法中，比较前后的diff是一样的，说明元素完全相同，就省去删除和创建操作，只需要移动一下就行

2. 怎么用

• 我们子React中进行列表渲染的时候，会要求我们给每一项绑定一个唯一的key，如果不绑定，会进行警告提示

function App(props){const list=[{id:0,name:'tom0'},{id:1,name:'tom1'},{id:2,name:'tom2'},{id:3,name:'tom3'}]return (<div>{list.map((item)=>(<div>{item.name}</div>))}</div>)
}
export default App

• 提示我们每个child应该有一个不重复的key属性
• 我们给每个元素用id设置一个key

function App(props){const list=[{id:0,name:'tom0'},{id:1,name:'tom1'},{id:2,name:'tom2'},{id:3,name:'tom3'}]return (<div>{list.map((item)=>(<div key={item.id}>{item.name}</div>))}</div>)
}
export default App

• 运行发现没有警告提示了
• 这时候你又问了，那用index可以作为key值么，不可以，原因很简单，如果你删除了列表中的某一项，那么这项之后的index全会发生变化就没啥意义，不利于diff算法的优化
• 具体的diff算法我们下一篇文章讲

3. 总结

• key必须是唯一的
• index不建议作为key值