Web 性能优化：缓存 React 事件来提升性能

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

这是 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 有一种节省处理时间以提升性能的智能方法：若是组件的 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 的缘由。

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

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。