UI更新需要昂貴的 DOM 操作，而 React 內(nèi)部使用幾種巧妙的技術(shù)以便最小化 DOM 操作次數(shù)龟梦。對(duì)于大部分應(yīng)用而言，使用 React 時(shí)無(wú)需專門優(yōu)化就已擁有高性能的用戶界面朝刊。盡管如此陶衅，你仍然有辦法來(lái)加速你的 React 應(yīng)用久脯。
1. 虛擬化長(zhǎng)列表
如果你的應(yīng)用渲染了長(zhǎng)列表（上百甚至上千的數(shù)據(jù)）時(shí)阅签，React官網(wǎng)推薦我們使用“虛擬滾動(dòng)”技術(shù)银室。這項(xiàng)技術(shù)會(huì)在有限的時(shí)間內(nèi)僅渲染有限的內(nèi)容鳄逾，并奇跡般地降低重新渲染組件消耗的時(shí)間稻轨，以及創(chuàng)建 DOM 節(jié)點(diǎn)的數(shù)量。
React官網(wǎng)推薦我們使用react-window和 react-virtualized 這2個(gè)熱門的虛擬滾動(dòng)庫(kù)雕凹。它們提供了多種可復(fù)用的組件殴俱，用于展示列表、網(wǎng)格和表格數(shù)據(jù)枚抵。
2. react-window與react-virtualized有什么不同线欲？
這2個(gè)庫(kù)，出自于同一個(gè)作者汽摹。react-virtualized是作者對(duì)React和窗口概念都不熟悉時(shí)寫的李丰，加了一些API和添加了太多非必要的功能和組件，后來(lái)作者后悔了逼泣，但因?yàn)橐坏┫蜷_源項(xiàng)目添加了一些東西趴泌，刪除它對(duì)用戶來(lái)說(shuō)是非常痛苦的。所以作者完整重寫了react-virtualized拉庶，并且更專注于使包裝更小和更快嗜憔。所以react-window是react-virtualized的輕量級(jí)替代品。
3.使用react-window網(wǎng)格的問題和解決方案
我使用的是VariableSizeGrid（可變尺寸網(wǎng)格）砍的。
問題1：使用itemData進(jìn)行網(wǎng)格中數(shù)據(jù)的傳遞時(shí)痹筛，當(dāng)columnCount（網(wǎng)格中的列數(shù)）*rowCount（網(wǎng)格中的行數(shù)）>itemData.length，會(huì)出現(xiàn)網(wǎng)格滾動(dòng)到最后一行時(shí)廓鞠，最后一行沒有被渲染帚稠。
方案1：給itemData 數(shù)組push（columnCount*rowCount- itemData.length）個(gè)對(duì)象｛true:true｝，然后在組件render時(shí)床佳，進(jìn)行判斷return（<div></div>）
問題2：網(wǎng)格可以100％填充頁(yè)面的寬度或高度嗎滋早？（這個(gè)問題作者有在npm上回答過）
方案2：網(wǎng)格寬高必須傳入number類型，所以不能直接寫’100%’砌们，需要使用react-virtualized-auto-sizer包杆麸。
問題3：這個(gè)比較重要搁进，沒有提供可以傳遞方法的API。提供了可以在外層附加自定義屬性或事件處理程序的API：outerElementType昔头。但不能滿足我想要點(diǎn)擊按鈕時(shí)才觸發(fā)事件的需求饼问。
