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 的原理，再去使用脚手架就会很简单，不会有纰漏，好了， 就到这里，从下篇博文开始，就是脚手架的安装使用了，加油！热爱学习的宝子们！