Web 性能優化：緩存 React 事件來提升性能

時間 2019-11-06

標籤 web 性能優化緩存 react 事件提升欄目 HTML 简体版

原文原文鏈接

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！前端

這是 Web 性能優化的第三篇，上一篇在下面看點擊查看：git

JavaScript中一個不被重視的概念是對象和函數是如何引用的，而且直接影響 React性能。若是建立兩個徹底相同的函數，它們仍然不相等，試試下面的例子：github

const functionOne = function() { alert('Hello world!'); };
const functionTwo = function() { alert('Hello world!'); };
functionOne === functionTwo; // false

可是，若是將變量指向一個已存在的函數，看看它們的差別：segmentfault

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 的緣由。

你的點贊是我持續分享好東西的動力，歡迎點贊！