前端常用库-nanoid和UUID：用来生成唯一的id、key在react虚拟DOM中的作用，以react/vue中key为例子

        1.key在react虚拟DOM中的作用 

简单来说，key是 虚拟DOM对象的一个标识，在真实DOM的显示和更新中有着极其重要的作用。

当状态中的数据发生变化时，react会根据变化后的新数据去生成新的虚拟DOM；

然后，react会将新的虚拟DOM和旧的虚拟DOM进行diff比较；

从而决定哪些虚拟DOM可以复用、哪些虚拟DOM需要进行更新；

最后，需要更新的DOM转化为真实DOM，进行真实DOM的更新，渲染到页面。可以复用的DOM就继续使用原来的。

         2.react中diff比较的规则

情况1：在旧虚拟DOM中找到了与新虚拟DOM相同的key

        如果，虚拟DOM里面的内容没变，就直接复用页面中旧的真实DOM。

        如果，虚拟DOM里面的内容有变化，则生成新的真实DOM，随后替换掉页面中旧的真实DOM。

情况2：在旧虚拟DOM中没有到与新虚拟DOM相同的key

        根据数据创建新的真实DOM，随后渲染到页面中。

注意：diff比较是先比较key值，再决定要不要继续比较内容。

        3.在react中，用index作为key可能会引发的问题

 有时候，我们可能会下意识的把index当作DOM元素的key，但这可能会引发一些问题。

情况1：若对数据进行：逆序添加、逆序删除等会破坏数据顺序的操作时，会导致没必要的真实DOM的更新。

        该情况下，页面数据的渲染没有问题，但是效率低。

情况2：若结构中还包含输入类的DOM，如input，就会产生错误的DOM更新。

        该情况下，可能会直接造成页面数据的渲染错误，比如本应该是A对象对应的数据，显示成了B对象对应的数据。

注意：如果只是纯数据的渲染，用index也可以（在不考虑效率的情况下）；最好还是使用唯一的key作为标识符。

       4.nanoid和UUID

 nanoid和UUID都是能产生唯一id的库。但是UUID库过于庞大，所有一般会使用较小的nanoid库。

第一步：安装

安装UUID库：yarn i uuid 或 npm i uuid 

安装nanoid库：yarn add nanoid 或 npm i nanoid

第二步：引入nanoid库，nanoid库中用分别暴露的方式暴露了一个函数nanoid

import {nanoid} from 'nanoid'

第三步：直接调用即可

let obj = {id:nanoid()}

 UUID的百度百科：https://baike.baidu.com/item/UUID/5921266?fr=aladdin

nanoid更多知识：https://www.npmjs.com/package/nanoid