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 

Logo

前往低代码交流专区

更多推荐