前端常用库-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的更新,渲
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
更多推荐
所有评论(0)