react 遍历 key 值的作用
在学习 react 或者是 vue 的时候,遍历一个数组展示到页面,都需要设置一个 key 值。那么这个 key 值作用是什么?需要怎么设置啊?
经典面试题
- react / vue 中 key 值的作用是什么?
- 为啥遍历列表的时候,key 值最好不要是 index 索引值?
解答
虚拟 DOM 的 key 值作用
【简单点说】:key 是虚拟 DOM 对象的标识,在更新显示的时候,key 值起着极其重要的作用。
【详细点说】:当状态中的数据发生变化时,react 会根据 新数据
生成 新的虚拟 DOM
,然后,React 进行 新虚拟 DOM
和 旧虚拟 DOM
的 diff 比较,比较规则如下:
- 旧虚拟DOM 中找到了与 新虚拟DOM 相同的 key:
- 如果 虚拟DOM 中的内容没有改变,直接使用之前的真实DOM。
- 如果 虚拟DOM 中的内容变了,则生成新的 真实DOM,然后替换掉页面中之前的 真实DOM。
- 旧 虚拟DOM 中未找到与 新虚拟DOM 相同的 key:
- 根据数据创建新的 真实DOM ,随后渲染到页面。
用 index 作为 key 值可能引发的问题
- 如果对数据进行:逆序添加、逆序删除等破坏顺序的操作:
- 会产生没有必要的 真实DOM 更新,但是界面效果没用问题,只是降低了效率。
- 如果结构中还包含了输入类的DOM:
- 会产生错误的 DOM 更新,这时界面渲染会出现很严重的错误问题。
- 【注意】如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作:
- 仅用于渲染列表展示,使用 index 作为 key 值是没有任何问题的。
开发过程中如何选择 key 值
- 最好的 key 值是使用每条数据的唯一标识符,比如:id,手机号码,身份证号码,学号等,但是一定要保证是唯一的。
- 如果确定只是简单的数据展示功能,使用 index 也是没有问题的。
结束语
好了,学了好久的 react,到现在一些重点知识点都已经了解的差不多了,到此为止,我们编写的 react 案例都是通过 html 写的,接下来后边的内容都是要开始接触脚手架工具创建 react 项目开发了。为啥不直接使用 脚手架 而是 html 方式写呢?先学会了基础的只是和 react 的原理,再去使用脚手架就会很简单,不会有纰漏,好了, 就到这里,从下篇博文开始,就是脚手架的安装使用了,加油!热爱学习的宝子们!