介紹

在當下Web開發盛行的時代里，Web應用隨之面臨著各種問題，雖然前端框架或者前端解決方案百花齊放，但是並不是所有的問題都能很完美的解決。由於Web應用是基於瀏覽器渲染介面的，而由於瀏覽器瓶頸的限制，當大量數據需要渲染到DOM中時，常常會很卡頓，傳統的做法大多數是向用戶展示一個loading遮罩層，或者是類似於分頁形式的加載，但顯然有些時候並不能解決所有問題，長時間loading的戰展示或許還會給用戶帶來不優雅的體驗，結合以上問題，就出現了一些更加優雅的解決方案，虛擬化加載！

我對虛擬化的理解

筆者認為虛擬化並不是一種新技術，它只是一種為了解決大數據量渲染的一種辦法，我們知道瀏覽器本身能展示給用戶的介面就那麼大，成千上萬的數據量渲染出來的頁面他並不能完全看到，因此就出現一種在用戶可見範圍內渲染頁面的技術，只有當用戶需要看到它的時候才會去渲染，也就是說原本渲染是一次性的，現在是分步進行的，很好的解決了介面渲染卡頓的問題！下面會介紹兩個解決此類問題的react組件框架

react virtualized

react virtualized是一個開源的React虛擬化組件，你可以到Github上獲取它，它能夠高效的呈現大型列表和表格數據，在Github上star數已達16k+，顯然是得到很多人認可的一種react虛擬加載解決方案，而且並沒有停止維護：

react-window

react-window可以說是一個完全重寫的React虛擬化，對比react virtualized，它是一個更加輕量級的解決方案，沒有太多非必要的功能，與react virtualized出自同源，作者本身是建議使用react-window的，因為添加了react virtualized的項目構建後會給項目增加35kb大小，而react-windows只會增加不到2kb，因此說react-window是輕量的，而且更適合初學者！同樣作者也在Github上開源了！

效果體驗

咱們通過動圖的方式簡單的來體驗下react virtualized和react-window，具體效果尚且不如自己去官網體驗！

react virtualized：

• 分散或非線性數據渲染：

• 數據網格（Grid）

相對來說UI要規則一些

• 數據列表

• 砌體布局

• 使用windows的滾動條

• 數據表格

建議直接去demo查看生成的代碼

react-window:

import React from 'react';
import ReactDOM from 'react-dom';
import { FixedSizeList as List } from 'react-window';
import './styles.css';
const Row = ({ index, style }) => (
 

 Row {index}
 

);
const Example = () => (
  
 height={150}
 itemCount={1000}
 itemSize={35}
 width={300}
 >
 {Row}
 
);
ReactDOM.render(, document.getElementById('root'));

如何選擇？

對於如何選擇，其實作者已經有過建議，建議如果是原本項目使用過react virtualized那麼就繼續使用，如果是新項目或者未使用react virtualized，那麼就選react-window吧，總體來說都可以，都能夠滿足大部分應用場景！

總結

Web開發中會遇到一系列問題，無論是自己造輪子（前提實力要足），還是尋找第三方解決方案，都是軟體開發中常遇到的問題，但最終的結果都是為了項目的正常進展或者按照預期完成，選擇合適的解決方案才是最重要的！