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

zebrayoung 發布于2019-08-26 13:34 / 2548人閱讀

摘要：的事件偵聽器需要獨立于。對于每個唯一值，創建并緩存一個函數對于將來對該唯一值的所有引用，返回先前緩存的函數。在給定唯一標識符的情況下生成或返回單擊處理程序。

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

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

Web 性能優化：使用 Webpack 分離數據的正確方法

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 (
      
        {this.instructions}
        
    )
  }
}

這是一個非常簡單的組件。有一個按鈕，當它被點擊時，就 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}
        
    );
  }
}

在這種情況下，SomeComponent 的每個實例都有一個不同的警告框。 Button 的click事件偵聽器需要獨立于 SomeComponent。通過傳遞 createAlertBox 方法，它就和 SomeComponent 重新渲染無關了，甚至和 message 這個屬性是否修改也沒有關系。createAlertBox 內存中的地址不會改變，這意味著 Button 不需要重新渲染，節省了處理時間并提高了應用程序的渲染速度

但如果函數是動態的呢?

修復(高級)

這里有個非常常見的使用情況，在簡單的組件里面，有很多獨立的動態事件監聽器，例如在遍歷數組的時候：

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

在本例中，有一個可變數量的按鈕，生成一個可變數量的事件監聽器，每個監聽器都有一個獨特的函數，在創建 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 (
      
        {this.props.list.map(listItem =>
          
            
        )}
      
    );
  }
}

數組中的每一項都通過 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...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

云服務器 GPU云服務器 web性能優化提高代碼性能服務器虛擬能提高性能性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109061.html

前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
Web 性能優化：Preload,Prefetch的使用及在 Chrome 中的優先級

摘要：例如，將獲得最高優先級，而將獲得低優先級或中優先級。不帶屬性的的優先級將會等同于異步請求。對使用屬性，不然將不會從中獲益。因此，在標記中聲明以被掃描器掃描。這是 Web 性能優化的第 6 篇，上一篇在下面看點擊查看： Web 性能優化：使用 Webpack 分離數據的正確方法 Web 性能優化：圖片優化讓網站大小減少 62% Web 性能優化：緩存 React 事件來提高性能 We...

LiangJ 2019-08-23 16:52 評論0 收藏0
Web 性能優化：理解及使用 JavaScript 緩存

摘要：想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你這是性能優化的第篇，上一篇在下面看點擊查看性能優化使用分離數據的正確方法性能優化圖片優化讓網站大小減少性能優化緩存事件來提高性能性能優化種優化和加快網站速度的方法隨著我們的應用程序的不斷增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想閱讀更多優質文章請猛戳Gi...

endiat 2019-08-23 16:09 評論0 收藏0
前端每周清單第 54 期: SwiftNIO, 自定義 vue-router, Web 緩存與 Gr

摘要：新聞熱點國內國外，前端最新動態蘋果開源了版近日，蘋果開源了一款基于事件驅動的跨平臺網絡應用程序開發框架，它有點類似，但開發語言使用的是。蘋果稱的目標是幫助開發者快速開發出高性能且易于維護的服務器端和客戶端應用協議。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清單專注大前端領域內容，以對外文資料的...

劉東 2019-08-22 15:20 評論0 收藏0
《高性能JavaScript》讀書筆記

摘要：除此以外，讓元素脫離文檔流也是一個很好的方法。因為元素一旦脫離文檔流，它對其他元素的影響幾乎為零，性能的損耗就能夠有效局限于一個較小的范圍。講完重排與重繪，往元素上綁定事件也是引起性能問題的元兇。高性能這本書非常精致，內容也非常豐富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...

W_BinaryTree 2019-08-21 15:12 評論0 收藏0