在使用 React Hooks 中的 useEffect
useCallback
useMemo
等钩子函数时,需要传递一个依赖项数组,用于指定钩子函数的执行时机和条件。React 会比较依赖项数组中的每个元素,判断它们是否发生了变化,如果有变化则会执行对应的钩子函数。
变量的比较
在 JavaScript 中,变量可以保存两种类型的值:基本数据类型和引用数据类型。
基本数据类型包括数字、字符串、布尔值、null、undefined 和 Symbol。基本数据类型的值在内存中是独立存储的,它们的值是不可变的,因此比较它们是否相等只需要比较它们的值即可。
引用数据类型包括对象、数组、函数等。引用数据类型的值是保存在内存中的对象,变量存储的实际上是对象的地址(或称为引用),而不是对象本身的值。因此,在比较两个对象时,浅比较(Shallow Comparison)需要比较它们的引用是否相等,如果两个对象引用的是同一个对象,则认为这两个对象相等。深比较(Deep Comparison)则会递归比较对象的所有属性,直到找到基本类型的属性或者属性数量不相等为止,如果两个对象的所有属性都相等,则认为这两个对象相等。
例如,下面的代码创建了两个对象,虽然它们的属性值相同,但它们是两个不同的对象,存储在不同的内存位置上:
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { name: 'Alice', age: 20 };
console.log(obj1 === obj2);// false
在上面的代码中,我们使用 ===
运算符来比较两个对象是否相等,结果是 false
,因为它们的引用不同。
依赖项的浅比较
在比较依赖项数组中的元素时,React 会使用浅比较。具体来说,React 会比较每个元素的值是否相等,如果是基本数据类型,则比较它们的值是否相等;如果是引用数据类型,则比较它们的引用是否相等。这意味着如果两个对象的属性值相同,但它们的引用不同,React 仍然会认为它们不相等,从而重新执行钩子函数。而深比较通常用在需要比较嵌套结构的对象时,例如在 React 中比较两个组件的 props 是否相等。
浅比较的优缺点
浅比较的优点是效率高,因为它只比较一层,不需要递归比较嵌套数据的每个元素。但也有缺点,就是无法检测到嵌套数据的深层次变化。如果依赖项中包含了嵌套的数据结构,则可能会导致钩子函数不会在预期的情况下执行。
为了避免这种情况,可以使用深比较,例如使用 lodash
提供的 _.isEqual
函数来比较嵌套数据的每个元素。但需要注意的是,深比较会降低效率,因为它需要递归比较每个元素。因此,只有在必要的情况下才应该使用深比较。
以上。
- 原文链接
- 欢迎关注微信公众号【FE世界】