Web性能优化：缓存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 有什么关系? 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 (
  
  
  
        
  
  
  
          {this.instructions}
  
  
  
           alert('!')} />

)

}

这是一个非常简单的组件。有一个按钮，当它被点击时，就 alert。 instructions 用来表示是否点击了按钮，这是通过 SomeComponent 的 prop 的 do={true} 或 do={false} 来控制。

这里所发生的是，每当重新渲染 SomeComponent 组件(例如 do 从 true 切换到 false)时，按钮也会重新渲染，尽管每次 onClick 方法都是相同的，但是每次渲染都会被重新创建。

每次渲染时，都会在内存中创建一个新函数(因为它是在 render 函数中创建的)，并将对内存中新地址的新引用传递给

和前面的例子相反，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 (
{this.instructions}

class SomeComponent extends React.PureComponent {
render() {
return (
- {this.props.list.map(listItem =>
- alert(listItem.text)} />
- )}
);
}
}

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 (
- {this.props.list.map(listItem =>
- )}
);
}
}

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

修复

修复(高级)