使用Sencha ExtReact Grid高效管理和顯示React 16應(yīng)用中的大型數(shù)據(jù)集，充分利用內(nèi)置功能（如排序、過濾和編輯），無需大量DOM操作。

關(guān)鍵要點:

• 利用Sencha ExtReact Grid在React 16應(yīng)用程序中高效管理和顯示大型數(shù)據(jù)集，利用內(nèi)置功能（如排序、過濾和編輯），無需大量DOM操作。
• 使用ExtReact npm包和ExtReact應(yīng)用程序生成器快速設(shè)置功能齊全的React應(yīng)用程序，從而簡化開發(fā)流程。
• 通過將交互式組件（如按鈕和火花線圖）直接嵌入網(wǎng)格單元格中來增強用戶界面，提供動態(tài)且響應(yīng)迅速的用戶體驗。
• 利用網(wǎng)格導(dǎo)出程序插件，只需少量代碼即可啟用數(shù)據(jù)導(dǎo)出功能，允許用戶直接從網(wǎng)格導(dǎo)出數(shù)據(jù)到Excel或CSV格式。
• 使用條件插件和響應(yīng)式設(shè)計功能，優(yōu)化桌面和移動平臺的應(yīng)用程序，確保無縫的跨平臺用戶體驗。

本文最初發(fā)表於Sencha。感謝您支持使SitePoint成為可能的合作夥伴。

React 16是基於React新的核心架構(gòu)（代號為“Fiber”）構(gòu)建的第一個React版本。 React 16從根本上設(shè)計為支持異步渲染，這允許處理大型組件樹而不會阻塞主執(zhí)行線程。它支持許多關(guān)鍵功能，例如使用錯誤邊界捕獲異常、從渲染返回多個組件、減小文件大小和支持MIT許可證。

如果您正在使用React 16開發(fā)數(shù)據(jù)驅(qū)動的Web應(yīng)用程序，則您很有可能會在某個時候使用網(wǎng)格或類似電子表格的界面來顯示用戶的數(shù)據(jù)。根據(jù)具體情況，您的用戶可能希望應(yīng)用程序中的網(wǎng)格能夠：

• 帶有固定標題的滾動
• 通過單擊列標題進行排序
• 顯示和隱藏特定列
• 分頁、分組和匯總
• 編輯單元格中的數(shù)據(jù)
• 導(dǎo)出到Excel
• 深入/行擴展

網(wǎng)格可能是React中最棘手和最複雜的UI組件之一，因為許多必要的功能都需要大量的React專業(yè)知識，以及深入研究DOM的意願和能力。幸運的是，ExtReact Grid提供了所有這些功能以及更多功能。

在本文中，我們將使用Sencha ExtReact Grid創(chuàng)建一個示例，該示例顯示有關(guān)股票和股票公司的信息。如果您想使用HTML表格或其他第三方組件編寫網(wǎng)格，您可能需要執(zhí)行諸如處理單擊列標題以進行排序、單擊列標題之間的分隔符以調(diào)整大小，或者滑動分頁器並獲取下一頁數(shù)據(jù)之類的操作。使用ExtReact Grid，這些功能是內(nèi)置的。想自己嘗試一下嗎？立即開始使用ExtReact的30天免費試用版——在此處註冊。

讓我們開始使用ExtReact Grid構(gòu)建應(yīng)用程序。

使用ExtReact應(yīng)用程序生成器入門

要開始使用ExtReact組件開發(fā)React應(yīng)用程序，請按照以下步驟操作：

確保您已設(shè)置Node環(huán)境

首先，確保您的系統(tǒng)上已設(shè)置Node 8.11 和NPM 6 。您可以從Node網(wǎng)站下載最新的Node版本。如果您已經(jīng)安裝了Node，則可以使用以下命令輕鬆檢查node和npm版本：

<code>node -v
npm -v</code>

獲取ExtReact npm存儲庫的登錄憑據(jù)

ExtReact npm包託管在Sencha的私有npm存儲庫中。您只需登錄該存儲庫一次即可訪問所有ExtReact包。要獲取登錄憑據(jù)，請訪問ExtReact 30天免費試用頁面並填寫表格。我們將向您發(fā)送一封包含登錄詳細信息以及一些資源鏈接（例如文檔和示例項目）的電子郵件。

登錄ExtReact npm存儲庫並獲取ExtReact應(yīng)用程序生成器

下一步是登錄到Sencha的私有npm存儲庫，該存儲庫託管ExtReact包。使用您的npm登錄名（在電子郵件中提供）將存儲庫與@sencha範圍關(guān)聯(lián)，並在出現(xiàn)提示時輸入憑據(jù)：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

下一步是安裝ExtReact生成器包。

<code>npm install -g @sencha/ext-react-gen</code>

創(chuàng)建您的第一個React應(yīng)用程序

運行Yeoman生成器以創(chuàng)建您的第一個ExtReact應(yīng)用程序：

<code>ext-react-gen app your-app-name-here -i</code>

生成器將要求您命名您的應(yīng)用程序、命名npm包並選擇主題。默認的Material主題（基於Google的Material設(shè)計指南）是一個不錯的起始主題。選擇“生成一個空應(yīng)用程序”。生成器還將提示您為項目創(chuàng)建一個新目錄。然後，生成器將下載並創(chuàng)建您的示例應(yīng)用程序，包括相關(guān)的依賴項。

運行您的React應(yīng)用程序

在生成器輸出中，您將找到運行應(yīng)用程序的步驟。這就像更改到您的新應(yīng)用程序目錄並使用以下命令運行應(yīng)用程序一樣簡單：

<code>npm start</code>

這將啟動應(yīng)用程序，您的空React應(yīng)用程序?qū)H顯示應(yīng)用程序的標題。應(yīng)用程序中的主組件（例如StocksGrid）在根目錄處有一個容器，該容器被標記為全屏，佈局設(shè)置為fit，這意味著它將拉伸其子元素以填充它。

請參閱GitHub上的此步驟之前的代碼。

向應(yīng)用程序添加網(wǎng)格

添加股票數(shù)據(jù)

我們將向應(yīng)用程序添加一個示例數(shù)據(jù)集，稱為stocks.json。這是一個相當(dāng)大的數(shù)據(jù)集，大約有10,000行json數(shù)據(jù)，每一行代表一家公司或股票代碼——因此我們有公司名稱、股票代碼、行業(yè)、他們所在的行業(yè)，以及一個包含該股票最後5次銷售的滴答數(shù)組。這是我們將在網(wǎng)格中顯示的數(shù)據(jù)。在實際應(yīng)用程序中，所有這些數(shù)據(jù)都將在後端返回。我們將為此示例應(yīng)用程序靜態(tài)加載它，而不是遍歷如何構(gòu)建後端rest API的所有機制。但是它將以與您從實際後端獲取數(shù)據(jù)完全相同的方式加載。

創(chuàng)建基本網(wǎng)格

在StockGrid組件render方法中，我們將返回一個帶有列的網(wǎng)格。

要在網(wǎng)格中放置列，我們使用column組件，它採用與stocks數(shù)據(jù)名稱字段相同的dataIndex。它採用作為列標題文本的text prop，然後我們還可以為列指定寬度，例如固定寬度或flex，或者flex和最小值或最大值的組合。我們將為公司名稱、代碼、滴答、行業(yè)和行業(yè)添加column組件。創(chuàng)建如下所示的新StocksGrid類：

<code>node -v
npm -v</code>

現(xiàn)在，將StockGrid添加到Class App中，如下所示：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

請參閱GitHub上的此步驟之前的代碼。您將能夠在npm start上看到帶有空網(wǎng)格的Web應(yīng)用程序。

使用網(wǎng)格綁定股票數(shù)據(jù)

ExtReact中的網(wǎng)格是從Ext Data Store中提取並呈現(xiàn)數(shù)據(jù)的表。在ExtReact中，我們的存儲實現(xiàn)是一個數(shù)據(jù)結(jié)構(gòu)，允許您為網(wǎng)格或組件（如列表或圖表）排序和過濾數(shù)據(jù)。

我們現(xiàn)在可以開始加載股票數(shù)據(jù)並創(chuàng)建存儲。同樣，網(wǎng)格始終從存儲中獲取其數(shù)據(jù)，並且與網(wǎng)格的一些交互將觸發(fā)存儲上的事件，例如重新加載、排序或分頁。為此，我們將在此處創(chuàng)建我們的存儲。

Ext數(shù)據(jù)存儲與flux存儲不同。使網(wǎng)格和存儲與標準React方法略有不同的是，兩者緊密集成。通常，您可以將數(shù)據(jù)直接傳遞到存儲，或者存儲可以使用代理自行從後端提取數(shù)據(jù)。使用ExtReact Grid，您可以獲得交互式功能，例如過濾、排序、分頁、分組和匯總，而無需實際編寫代碼。

在此示例中，我們直接從Stocks數(shù)據(jù)文件將數(shù)據(jù)傳遞到存儲。您還可以使用代理配置創(chuàng)建存儲——擁有代理允許我們執(zhí)行各種很棒的操作，例如遠程分頁、過濾和排序。我們將autoload設(shè)置為true，因此它會自動加載網(wǎng)格。數(shù)據(jù)並非按任何標準特別排序，因此我們將通過指定name屬性在客戶端對其進行排序。

<code>npm install -g @sencha/ext-react-gen</code>

在Grid中，將store配置分配給創(chuàng)建的store。

<code>ext-react-gen app your-app-name-here -i</code>

現(xiàn)在，我們有一個包含所有數(shù)據(jù)的網(wǎng)格，如下所示：

使用這段簡單的代碼，您可以免費獲得許多功能——例如排序——這允許您單擊任何列標題，它會自動排序（請參閱下面的符號列）。

在這種情況下，排序是在客戶端完成的。但是，如果我們實現(xiàn)了真實的後臺API，我們可以配置代理在後臺進行遠程排序，並在數(shù)據(jù)庫中使用“order by子句”進行排序。

您還可以免費獲得可調(diào)整大小的列。因此，即使我們在這些列上設(shè)置了寬度，如果用戶想查看或關(guān)閉某些內(nèi)容，他也可以通過左右拖動列來實現(xiàn)。

您還可以獲得一個不錯的分組功能。因此，如果我們想按行業(yè)分組，我們可以說按此字段分組，它將按行業(yè)的值對所有數(shù)據(jù)進行分組，並且在您向下滾動每個分組時，它將為您提供一個固定的標題。

您會注意到，對於10,000條記錄，此數(shù)據(jù)渲染速度非?？?。它渲染速度如此之快的原因是它使用了我們所說的緩衝渲染。因此，儘管此表看起來已滿，並且您可以向下滾動，並且它會不斷地繼續(xù)下去，但在初始加載時，它只渲染比您實際看到的“視口高度”多一點的內(nèi)容。

當(dāng)您向下滾動時，它實際上會用較新的記錄替換單元格的內(nèi)容，就像您在存儲中向下分頁一樣。因此，它實際上盡可能地保留了DOM元素，並保持DOM較小，從而使內(nèi)存消耗較小並確保高性能。

請參閱GitHub上的此步驟之前的代碼。

設(shè)置網(wǎng)格樣式

有多種方法可以設(shè)置網(wǎng)格樣式，以便更容易分析數(shù)據(jù)。

使用Cell prop

讓我們來看看控制單元格樣式的方法。我們可以使名稱加粗——最好的方法是使用cell prop。 cell採用許多配置，這些配置控制單元格的外觀。我們將在此處添加一個style配置，然後我們將說fontWeight等於粗體。

<code>node -v
npm -v</code>

在行中添加按鈕

現(xiàn)在，我們將做一些更適用於現(xiàn)實世界的事情。假設(shè)我們想要一個按鈕，我們可以單擊該按鈕來購買左側(cè)列中的其中一隻股票。為此，我們可以添加一列，這次我們不會添加dataIndex，因為它不對應(yīng)於字段中的任何特定項目或存儲中的任何字段。我們將添加一個帶有Button的WidgetCell。我們將進行一些樣式設(shè)置——我們將為其添加一個圓形操作UI，因此按鈕將具有圓形操作外觀：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

我們將使用的buy handler非常簡單。當(dāng)您單擊購買按鈕時，我們將只使用名為ext.toast的假設(shè)，它將在頂部顯示一條小提示消息，顯示您要購買的股票的代碼。同樣，我們將渲染每一行將要渲染的列。我們將渲染此按鈕，然後當(dāng)您單擊它時，它將調(diào)用此函數(shù)：

<code>npm install -g @sencha/ext-react-gen</code>

您可以從此示例中看到，您基本上可以在網(wǎng)格單元格內(nèi)嵌入任何ExtReact組件，並且它是完全交互式的。它充當(dāng)完整的React組件。

請參閱GitHub上的此步驟之前的代碼。

添加趨勢火花線圖

在Stock Data中，我們有最後五次股票銷售的滴答數(shù)組。讓我們將其作為火花線圖嵌入網(wǎng)格中。我們將使用widgetcell在網(wǎng)格單元格內(nèi)渲染ExtReact組件。

<code>node -v
npm -v</code>

當(dāng)您使用鼠標懸停在線圖中的不同點上時，它將顯示格式化為兩位小數(shù)的Y值。

請參閱GitHub上的此步驟之前的代碼。

將數(shù)據(jù)導(dǎo)出到Excel

數(shù)據(jù)密集型應(yīng)用程序中的常見要求之一是將數(shù)據(jù)導(dǎo)出到Excel。 ExtReact通過使用網(wǎng)格的plugins prop可以輕鬆實現(xiàn)此目的。

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

為了方便調(diào)用導(dǎo)出功能，我們將添加更多組件。我們將添加titlebar並將titlebar?？吭诰W(wǎng)格頂部並在其中放置一個菜單。當(dāng)您單擊“導(dǎo)出”按鈕時，您將可以選擇導(dǎo)出到Excel或CSV。

<code>npm install -g @sencha/ext-react-gen</code>

導(dǎo)出處理程序?qū)鬟f導(dǎo)出類型和文件名擴展名：

<code>ext-react-gen app your-app-name-here -i</code>

確保在package.json依賴項中包含導(dǎo)出程序。例如：

<code>npm start</code>

安裝依賴項。

<code><grid> ></grid>
      <column> dataIndex="name" text="Name" width={300} /></column>
      <column> dataIndex="symbol" text="Symbol" /></column>
      <column> dataIndex="ticks" text="Trend" /></column>
      <column> dataIndex="sector" text="Sector" width={200} /></column>
      <column> dataIndex="industry" text="Industry" width={350} /></column>
></code>

Exporter插件支持將數(shù)據(jù)導(dǎo)出到各種文件格式。它支持原生XSLX、Excel XML以及HTML和CSV/TSV（逗號/製表符分隔值）格式。

請參閱GitHub上的此步驟之前的代碼。

向網(wǎng)格添加編輯功能

我們可以通過添加編輯數(shù)據(jù)的功能，使網(wǎng)格更像電子表格。要添加此功能，我們需要添加另一個名為gridcellediting的插件。通過添加此插件並將可編輯的列標記為可編輯，您現(xiàn)在擁有可以通過雙擊任何網(wǎng)格單元格來編輯的網(wǎng)格數(shù)據(jù)。您可以通過在網(wǎng)格單元格中按Tab鍵來繼續(xù)編輯網(wǎng)格。

添加網(wǎng)格單元格編輯插件：

<code>export default class App extends Component {
  render() {
       return (
           <extreact></extreact>               <stocksgrid></stocksgrid>              
       )
   }
}</code>

使“名稱”可編輯：

<code>     this.store = new Ext.data.Store({
           data: stocks,
           autoLoad: true,
           sorters: [{
               property: 'name'
           }],
           listeners: {
               update: this.onRecordUpdated
           }
       })</code>

處理編輯事件

如果您想在編輯網(wǎng)格單元格後執(zhí)行一些特殊操作，則可以偵聽存儲中的數(shù)據(jù)更改事件。您可以通過添加偵聽器配置和“更新事件”的偵聽器來實現(xiàn)。

“更新事件”將傳遞許多參數(shù)，包括存儲、更新的記錄、描述發(fā)生的事件的對象，然後傳遞已更改字段名稱的數(shù)組。您將在處理程序中添加它。在這種情況下，我們只是顯示一條提示消息。在實際應(yīng)用程序中，您實際上會應(yīng)用業(yè)務(wù)邏輯，例如將更改持久保存到數(shù)據(jù)庫中。

<code><grid> store={this.store}></grid>
      ...
></code>

向網(wǎng)格單元格添加選擇選項

如果您想向網(wǎng)格單元格添加“選擇”選項，則可以使用另一個名為SelectField的ExtReact組件來實現(xiàn)。您只需在所需的列中添加SelectField ExtReact組件即可。

<code>node -v
npm -v</code>

請參閱GitHub上的此步驟之前的代碼。

優(yōu)化跨平臺體驗

這對於桌面體驗效果很好，但是當(dāng)您最小化移動電話體驗的屏幕大小時，單元格編輯可能不是最佳的編輯體驗。對於小型屏幕設(shè)備，您可能需要選擇不同的編輯樣式。

platformconfig選項允許您為桌面或移動設(shè)備指定行為。您可以根據(jù)PlatformConfig將任何prop設(shè)置為不同的值，在這裡，我們將根據(jù)平臺設(shè)置插件。在此示例中，當(dāng)應(yīng)用程序在桌面上時，我們將使用gridcellediting。當(dāng)應(yīng)用程序在移動設(shè)備上時，我們將使用grideditable，它提供了一種在移動設(shè)備上編輯數(shù)據(jù)的更好方法。

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

請參閱GitHub上的此步驟之前的代碼。

您可以使用ExtReact 6.6網(wǎng)格，並使用React 16輕鬆地向數(shù)據(jù)驅(qū)動的Web應(yīng)用程序中添加類似電子表格的界面。使用ExtReact，您可以使用任何Ext JS現(xiàn)代組件，包括網(wǎng)格、樹狀網(wǎng)格、透視網(wǎng)格、圖表、D3可視化等等——無需自定義。您可以構(gòu)建一個優(yōu)化的最小化包，其中僅包含您在應(yīng)用程序中使用的組件。您可以通過使用在桌面和移動設(shè)備上看起來都很棒的佈局和自適應(yīng)設(shè)計功能來構(gòu)建沉浸式用戶參與。提醒您，您可以立即開始免費試用ExtReact的30天試用版——在此處註冊。

有關(guān)使用Sencha Grid構(gòu)建React 16 Web應(yīng)用程序的常見問題

什麼是Sencha Grid，它如何與React 16集成？

Sencha Grid是一個高性能的網(wǎng)格組件，旨在處理大量數(shù)據(jù)。它與React 16（一個流行的用於構(gòu)建用戶界面的JavaScript庫）無縫集成。這種集成允許開發(fā)人員利用React的基於組件的架構(gòu)的強大功能以及Sencha Grid的強大功能，例如數(shù)據(jù)排序、過濾、分組和編輯。這種組合為構(gòu)建複雜的Web應(yīng)用程序提供了強大的工具。

如何在我的React 16應(yīng)用程序中開始使用Sencha Grid？

首先，您需要使用npm（Node.js的包管理器）安裝Sencha Grid包。安裝後，您可以將Sencha Grid組件導(dǎo)入到您的React應(yīng)用程序中，並像使用任何其他React組件一樣使用它。 Sencha Grid組件提供了各種prop，您可以使用這些prop來自定義其行為和外觀。

我可以將Sencha Grid與其他JavaScript框架或庫一起使用嗎？

是的，Sencha Grid的設(shè)計是與框架無關(guān)的，這意味著它可以與任何JavaScript框架或庫一起使用。但是，由於React和Sencha Grid都具有基於組件的特性，因此與React 16的集成特別無縫。

Sencha Grid的一些關(guān)鍵功能是什麼？

Sencha Grid提供了廣泛的功能，使其成為顯示和操作大量數(shù)據(jù)的強大工具。這些功能包括數(shù)據(jù)的排序、過濾、分組和編輯，以及高級功能，如無限滾動、行擴展器和列鎖定。網(wǎng)格還支持各種數(shù)據(jù)類型和格式，並且可以輕鬆自定義以滿足您的應(yīng)用程序的需求。

Sencha Grid如何處理大量數(shù)據(jù)？

Sencha Grid旨在高效地處理大量數(shù)據(jù)。它使用虛擬滾動機制，該機制僅渲染當(dāng)前在視口中可見的行。這意味著即使您的網(wǎng)格有數(shù)千甚至數(shù)百萬行，性能仍然很高，用戶體驗也很流暢。

我可以自定義Sencha Grid的外觀嗎？

是的，Sencha Grid提供了各種自定義其外觀的選項。您可以使用CSS更改顏色、字體和其他樣式，還可以使用其廣泛的API自定義網(wǎng)格的佈局和行為。

如何處理用戶與Sencha Grid的交互？

Sencha Grid提供了各種事件，您可以偵聽這些事件以處理用戶交互。這些事件包括單擊事件、選擇事件、編輯事件等等。通過偵聽這些事件，您可以在應(yīng)用程序中實現(xiàn)複雜的行為和交互。

我可以在商業(yè)應(yīng)用程序中使用Sencha Grid嗎？

是的，Sencha Grid可用於商業(yè)和非商業(yè)應(yīng)用程序。但是，對於商業(yè)用途，您需要從Sencha購買許可證。

如何更新Sencha Grid中的數(shù)據(jù)？

Sencha Grid提供了多種更新數(shù)據(jù)的方法。您可以更新整個數(shù)據(jù)集，也可以更新單個行或單元格。當(dāng)數(shù)據(jù)更新時，網(wǎng)格會自動重新渲染受影響的行或單元格。

Sencha Grid提供了哪些類型的支持？

Sencha為Sencha Grid提供了全面的文檔和教程，以及一個社區(qū)論壇，您可以在其中提問並與其他開發(fā)人員分享知識。此外，Sencha還為需要額外幫助或指導(dǎo)的客戶提供專業(yè)的支持和諮詢服務(wù)。

以上是如何使用sencha網(wǎng)格構(gòu)建16個Web應(yīng)用程序的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！