内容简介:这是 Web 性能优化的第三篇,上一篇在下面看点击查看:JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子:
这是 Web 性能优化的第三篇,上一篇在下面看点击查看:
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 有什么关系? React 有一种节省处理时间以提高性能的智能方法:如果组件的 props
和 state
没有改变,那么 render
的输出也一定没有改变。 显然,如果所有的都一样,那就意味着没有变化,如果没有任何改变, render
必须返回相同的输出,因此我们不必执行它。 这就是 React 快速的原因,它只在需要时渲染。
React 采用和 JavaScript 一样的方式,通过简单的 ==
操作符来判断 props
和 state
是否有变化。 React不会深入比较对象以确定它们是否相等。浅比较用于比较对象的每个键值对,而不是比较内存地址。深比较更进一步,如果键-值对中的任何值也是对象,那么也对这些键-值对进行比较。React 都不是:它只是检查引用是否相同。
如果要将组件的 prop 从 {x:1}
更改为另一个对象 {x:1}
,则 React 将重新渲染,因为这两个对象不会引用内存中的相同位置。 如果要将组件的 prop 从 object1
(上面的例子)更改为 o bject3
,则 React 不会重新呈现,因为这两个对象具有相同的引用。
在 JavaScript 中,函数的处理方式是相同的。如果 React 接收到具有不同内存地址的相同函数,它将重新呈现。如果 React 接收到相同的函数引用,则不会。
不幸的是,这是我在代码评审过程中遇到的常见场景:
class SomeComponent extends React.PureComponent { get instructions () { if (this.props.do) { return 'click the button: ' } return 'Do NOT click the button: ' } render() { return ( <div> {this.instructions} <Button onClick={() => alert('!')} /> </div> ) } }
这是一个非常简单的组件。 有一个按钮,当它被点击时,就 alert
。 instructions 用来表示是否点击了按钮,这是通过 SomeComponent
的 prop 的 do={true}
或 do={false}
来控制。
这里所发生的是,每当重新渲染 SomeComponent
组件(例如 do
从 true
切换到 false
)时,按钮也会重新渲染,尽管每次 onClick
方法都是相同的,但是每次渲染都会被重新创建。
每次渲染时,都会在内存中创建一个新函数(因为它是在 render
函数中创建的),并将对内存中新地址的新引用传递给 <Button />
,虽然输入完全没有变化,该 Button
组件还是会重新渲染。
修复
如果函数不依赖于的组件(没有 this
上下文),则可以在组件外部定义它。 组件的所有实例都将使用相同的函数引用,因为该函数在所有情况下都是相同的。
const createAlertBox = () => alert('!'); class SomeComponent extends React.PureComponent { get instructions() { if (this.props.do) { return 'Click the button: '; } return 'Do NOT click the button: '; } render() { return ( <div> {this.instructions} <Button onClick={createAlertBox} /> </div> ); } }
和前面的例子相反, createAlertBox
在每次渲染中仍然有着有相同的引用,因此按钮就不会重新渲染了。
虽然 Button
是一个小型,快速渲染的组件,但你可能会在大型,复杂,渲染速度慢的组件上看到这些内联定义,它可能会让你的 React 应用程序陷入囧境,所以最好不要在 render
方法中定义这些函数。
如果函数确实依赖于组件,以至于无法在组件外部定义它,你可以将组件的方法作为事件处理传递过去:
class SomeComponent extends React.PureComponent { createAlertBox = () => { alert(this.props.message); }; get instructions() { if (this.props.do) { return 'Click the button: '; } return 'Do NOT click the button: '; } render() { return ( <div> {this.instructions} <Button onClick={this.createAlertBox} /> </div> ); } }
在这种情况下, SomeComponent
的每个实例都有一个不同的警告框。 Button 的click事件侦听器需要独立于 SomeComponent
。 通过传递 createAlertBox
方法,它就和 SomeComponent
重新渲染无关了,甚至和 message
这个属性是否修改也没有关系。 createAlertBox
内存中的地址不会改变,这意味着 Button
不需要重新渲染,节省了处理时间并提高了应用程序的渲染速度
但如果函数是动态的呢?
修复(高级)
这里有个非常常见的使用情况,在简单的组件里面,有很多独立的动态事件监听器,例如在遍历数组的时候:
class SomeComponent extends React.PureComponent { render() { return ( <ul> {this.props.list.map(listItem => <li key={listItem.text}> <Button onClick={() => alert(listItem.text)} /> </li> )} </ul> ); } }
在本例中,有一个可变数量的按钮,生成一个可变数量的事件监听器,每个监听器都有一个独特的函数,在创建 SomeComponent
时不可能知道它是什么。怎样才能解决这个难题呢?
输入记忆,或者简单地称为缓存。 对于每个唯一值,创建并缓存一个函数; 对于将来对该唯一值的所有引用,返回先前缓存的函数。
这就是我将如何实现上面的示例。
class SomeComponent extends React.PureComponent { // SomeComponent的每个实例都有一个单击处理程序缓存,这些处理程序是惟一的。 clickHandlers = {}; // 在给定唯一标识符的情况下生成或返回单击处理程序。 getClickHandler(key) { // 如果不存在此唯一标识符的单击处理程序,则创建 if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) { this.clickHandlers[key] = () => alert(key); } return this.clickHandlers[key]; } render() { return ( <ul> {this.props.list.map(listItem => <li key={listItem.text}> <Button onClick={this.getClickHandler(listItem.text)} /> </li> )} </ul> ); } }
数组中的每一项都通过 getClickHandler
方法传递。所述方法将在第一次使用值调用它时创建该值的唯一函数,然后返回该函数。以后对该方法的所有调用都不会创建一个新函数;相反,它将返回对先前在内存中创建的函数的引用。
因此,重新渲染 SomeComponent
不会导致按钮重新渲染。类似地,相似的,在 list
里面添加项也会为按钮动态地创建事件监听器。
当多个处理程序由多个变量确定时,可能需要使用自己的聪明才智为每个处理程序生成唯一标识符,但是在遍历里面,没有比每个 JSX
对象生成的 key
更简单得了。
这里使用 index 作为唯一标识会有个警告:如果列表更改顺序或删除项目,可能会得到错误的结果。
当数组从 ['soda','pizza']
更改为 ['pizza']
并且已经缓存了事件监听器为 listeners[0] = () => alert('soda')
,您会发现 用户点击提醒苏打水的披萨的now-index-0按钮。 但点击 index
为 0 的按钮 pizza
的时候,它将会弹出 soda
。这也是 React 建议不要使用数组的索引作为 key 的原因。
你的点赞是我持续分享好东西的动力,欢迎点赞!
一个笨笨的码农,我的世界只能终身学习!
更多内容请关注公众号 《大迁世界》 !
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 系统性能提升之缓存
- 听说,加缓存能提高性能?
- 一次缓存性能问题排查
- 性能提升: reids与内存缓存
- 理解高性能内存缓存对象缓存Memcached原理 (Memcached核心概念,部署)
- 设计实现高性能本地内存缓存
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法技术手册
[美]海涅曼 (Heineman.G.T.)、[美]波利切 (Pollice.G.)、[美]塞克欧 (Selkow.S.) / 东南大学出版社 / 2009-4 / 58.00元
创造稳定的软件需要有效的算法,但是程序设计者们很少能在问题出现之前就想到。《算法技术手册(影印版)》描述了现有的可以解决多种问题的算法,并且能够帮助你根据需求选择并实现正确的算法——只需要一定的数学知识即可理解并分析算法执行。相对于理论来说,本书更注重实际运用,书中提供了多种程序语言中可用的有效代码解决方案,可轻而易举地适合一个特定的项目。有了这本书,你可以: 解决特定编码问题或改进现有解决......一起来看看 《算法技术手册》 这本书的介绍吧!