这篇文章主要介绍“JavaScript通过缓存React事件来提高性能”,在日常操作中,相信很多人在JavaScript通过缓存React事件来提高性能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript通过缓存React事件来提高性能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子:
const functionOne = function() { alert('Hello world!'); }; const functionTwo = function() { alert('Hello world!'); }; functionOne === functionTwo; // false
但是,如果将变量指向一个已存在的函数,看看它们的差异:
const functionThree = function() { alert('Hello world!'); }; const functionFour = functionThree; functionThree === functionFour; // true
对象的工作方式也是一样的。
const object1 = {}; const object2 = {}; const object3 = object1; object1 === object2; // false object1 === object3; // true
如果人有其他语言的经验,你可能熟悉指针。每次创建一个对象,计算机会为这个对象分配了一些内存。当声明 object1={} 时,已经在用户电脑中的 RAM(随机存取存储器) 中创建了一个专门用于object1 的字节块。可以将 object1 想象成一个地址,其中包含其键-值对在 RAM 中的位置。
当声明 object2={} 时,在用户的电脑中的 RAM 中创建了一个专门用于 object2 的不同字节块。object1 的地址与 object2 的地址是不一样的。这就是为什么这两个变量的等式检查没有通过的原因。它们的键值对可能完全相同,但是内存中的地址不同,这才是会被比较的地方。
当我赋值 object3=object1 时,我将 object3 的值赋值为 object1 的地址,它不是一个新对象。它们在内存中的位置是相同的,可以这样验证:
const object1 = { x: true }; const object3 = object1; object3.x = false; object1.x; // false
在本例中,我在内存中创建了一个对象并取名为 object1。然后将 object3 指向 object1 这时它们的内存的地址中是相同的。
通过修改 object3,可以改变对应内存中的值,这也意味着所有指向该内存的变量都会被修改。obect1 的值也被改变了。
对于初级开发人员来说,这是一个非常常见的错误,可能需要一个更别深入的教程,但是本广是关于React 性能的,只是本文是讨论 React 性能的,甚至是对变量引用有较深资历的开发者也可能需要学习。
这与 React 有什么关系? null