Web 性能优化:缓存 React 事件来提高性能

栏目: IOS · Android · 发布时间: 5年前

内容简介:这是 Web 性能优化的第三篇,上一篇在下面看点击查看:JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子:

Web 性能优化:缓存 React 事件来提高性能

这是 Web 性能优化的第三篇,上一篇在下面看点击查看:

  1. Web 性能优化: 使用 Webpack 分离数据的正确方法
  2. Web 性能优化: 图片优化让网站大小减少 62%

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 有一种节省处理时间以提高性能的智能方法:如果组件的 propsstate 没有改变,那么 render 的输出也一定没有改变。 显然,如果所有的都一样,那就意味着没有变化,如果没有任何改变, render 必须返回相同的输出,因此我们不必执行它。 这就是 React 快速的原因,它只在需要时渲染。

React 采用和 JavaScript 一样的方式,通过简单的 == 操作符来判断 propsstate 是否有变化。 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 组件(例如 dotrue 切换到 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 的原因。

你的点赞是我持续分享好东西的动力,欢迎点赞!

一个笨笨的码农,我的世界只能终身学习!

更多内容请关注公众号 《大迁世界》


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Parsing Techniques

Parsing Techniques

Dick Grune、Ceriel J.H. Jacobs / Springer / 2010-2-12 / USD 109.00

This second edition of Grune and Jacobs' brilliant work presents new developments and discoveries that have been made in the field. Parsing, also referred to as syntax analysis, has been and continues......一起来看看 《Parsing Techniques》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试