react 和 vue 为什么要设置key?
key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点,提高diff速度,高效的更新 Virtual DOM;
key值采用index和id的区别?
const list 1 = [
{ id: 1, name; 'test1' },
{ id: 2, name; 'test2' },
{ id: 3, name; 'test3' }
]
// 向中间插入test4之后
const list2 = [
{ id: 1, name: "test1" },
{ id: 4, name: "test4 我是在最后添加的一条数据" },
{ id: 2, name: "test2" },
{ id: 3, name: "test3" }
];
- 使用index作为key
之前DOM | 更新后的DOM |
---|---|
key:0 index: 0 name: test1 | key:0 index: 0 name: test1 |
key:1 index: 1 name: test2 | key:1 index: 2 name: test4 我是在最后添加的一条数据 |
key:2 index: 2 name: test3 | key:1 index: 1 name: test2 |
key:2 index: 2 name: test3 |
只插入了一条数据,但是三条数据都要重新渲染
- 使用id作为key
之前DOM | 更新后的DOM |
---|---|
key:1 id: 1 name: test1 | key:1 id: 1 name: test1 |
key:2 id: 2 name: test2 | key:4 id: 4 name: test4 我是在最后添加的一条数据 |
key:3 id: 3 name: test3 | key:2 id: 2 name: test2 |
key:3 id: 3 name: test3 |
对比发现:只有一条数据变化了,就是id为4的数据,因此只新渲染这条数据,其他的复用之前的就可以了。
vue和react的Virtual DOM的Diff算法大致相同,其核心是基于两个简单的假设:
- 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。
- 同一层级的一组节点,他们可以通过唯一的id进行区分。
基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。
key的作用主要是为了高效的更新虚拟DOM
防抖与节流
-
防抖
调用动作n秒之后,才会执行该动作,如果在n秒之内又调用了此动作则重新计算执行时间;
-
节流
预先设置一个执行周期,当调用动作的时刻大于执行周期时,执行该动作,然后进入下一个执行周期;
Set 和 Map
用于数据存储和数据重组。
简单介绍
-
Set 集合
类似于数组,但是成员是无序唯一的。既可以存储原始值,也可以存储对象引用。
-
属性
size, constructor
-
方法
add, delete, has, clear, keys, values, entries, forEach(callbackFn(value, key), thisArg)
-
应用
// 数组去重 let arr = [1,2,3,2,1]; [...new Set(arr)]; // [1,2,3]
-
// 将Set结构转为数组的方法
[…new Set([1,2,3])] // 1. 扩展运算符
Array.from(new Set([1,2,3])) // 2. Array.from方法
WeakSet 弱引用Set
-
与Set的区别
- 只能存储对象引用,不能存放值
- WeakSet对象中储存的对象值都是被弱引用的,即垃圾回收机制不考虑WeakSet 对该对象的引用,如果没有其他的变量或属性引用这个对象值,则这个对象将会被垃圾回收掉,所以,WeakSet 对象里有多少个成员元素,取决于垃圾回收机制有没有运行,运行前后成员个数可能不一致,遍历结束之后,有的成员可能取不到了(被垃圾回收了,所以 WeakSet 对象是无法被遍历的,也拿不到它包含的所有元素。
-
属性
constructor
-
方法
add, delete, has, clear
-
Map 字典
-
与Set的异同
- 共同点:存储的值都是唯一的
- 不同点:Set是以[value, value]的形式存储数据,而Map是以[key, value]的形式存储数据。
-
属性
constructor, size
-
方法
set, get, has, delete, clear, keys, valus, entries, forEach
-
-
WeakMap 弱引用Map
-
与Map的区别
- 键必须是对象,而值可以是任意
- 键是弱引用的,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收(相应的key则变成无效的),所以,WeakMap 的 key 是不可枚举的。
-
属性
constructor
-
方法
set, get, has, delete
-
-
总结
-
Set
- 成员唯一、无序且不重复
- [value, value],只有键值,没有键名
- 可以遍历
-
WeakSet
- 成员都是对象
- 成员都是弱引用,键值所指的对象可以被垃圾回收(可以用来保存DOM节点,不容易造成内存泄漏)
- 不能遍历
-
Map
- 成员唯一、无序且不重复
- [key, value],有键值,有键名
- 可以遍历
-
WeakMap
- 键名必须是对象(null除外)
- 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
- 不能遍历
-
关于弱引用
弱引用可以防止在 DOM节点或事件处理程序 与其关联的对象(例如闭包)之间存在引用循环时浏览器(通常是IE,特别是旧版本)的内存泄漏。
介绍
弱引用:在计算机程序设计语言中,弱引用和强引用相对,它是指不能确保其引用的对象不会被垃圾回收机制回收的引用。一个对象若只被弱引用引用,则认为是不可访问的或者弱访问的,因此他随时可能会被回收。
在js中,一般创建一个对象,都是建立一个强引用:
var obj = new Object();
只有当obj = null时,才有可能回收obj 所引用的对象。
而如果我们能创建一个弱引用的对象:
// 假设可以这样创建一个 var obj = new WeakObject();
我们什么都不用做,就静静的等待垃圾回收执行,obj所指向的对象就可以被回收。
结合WeakMap说明弱引用
WeakMap 保持了对键名所引用对象的弱引用
正常情况下:
const key = new Array(4); const arr = [ [key, 1] ];
使用这种方式,其实我们是创建了一个arr对key引用的对象的强引用。
当key = null时,只是去掉了key对obj的强引用,并没有去除arr对obj的强引用,所以obj还是不会被回收。
这时候就说到WeakMap了:
const key = new Array(4); var arr = new WeakMap(); arr.set(key, 'object');
使用这种方式,其实我们是创建了一个arr对key引用的对象的弱引用。
当key = null时,去掉了key对obj的强引用,只剩下arr对obj的弱引用,下次垃圾回收时,该引用对象就会被回收了。
弱引用的应用
在DOM对象上保存相关的数据:
var element = document.querySelector('.element'); var wm = new WeakMap(); wm.set(element, 'data');
let value = wm.get(elemet);
console.log(value); // dataelement.parentNode.removeChild(element);
element = null;数据缓存:
const cache = new WeakMap(); function countOwnKeys(obj) { if(cache.has(obj)) { console.log('cached'); cache.get(obj); }else { console.log('computed'); const count = Object.keys(obj).length; cache.set(obj, count); return count; } }