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 ( 
      <div> 
        {this.instructions} 
        <Button onClick={() => alert('!')} /> 
      </div> 
    ) 
  } 
} 

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

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!