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

文章目录

• 一文讲清楚React中的key值作用与原理
• [1. 是什么](#1. 是什么)
• [2. 怎么用](#2. 怎么用)
• [3. 总结](#3. 总结)

一文讲清楚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值