Kendo UI最新版下載

Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠為客戶提供更好的用戶體驗，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

優(yōu)化性能是在交付React應(yīng)用程序之前要考慮的一項重要技術(shù)，您可以探索優(yōu)化React應(yīng)用程序的不同方法，這些方法可以顯著提高應(yīng)用程序的速度和整體用戶體驗。

引言

在構(gòu)建任何React應(yīng)用程序時，會考慮到應(yīng)用程序應(yīng)如何工作和最終效果，團隊或開發(fā)人員需要尋找技巧來針對最終用戶的體驗優(yōu)化應(yīng)用程序。很多時候，您會忽略此操作，但是在本文中，我將分享五種方法來開始優(yōu)化應(yīng)用程序以獲得更好的性能。

React是一個用于構(gòu)建用戶界面的JavaScript庫，React提供了幾種方式來最大程度地減少更新UI所需的昂貴DOM操作數(shù)量。對于許多應(yīng)用程序，使用React將快速創(chuàng)建用戶界面，無需進行大量工作來專門針對性能進行優(yōu)化。不過有幾種方法可以加快您的React應(yīng)用程序的速度，一起深入學(xué)習(xí)一下吧。

使用React.Fragment避免向DOM添加額外的節(jié)點

在使用React時，有時需要渲染多個元素或返回一組相關(guān)項。 這是一個例子：

function App() {
return (
<h1>Hello React!</h1>
<h1>Hello React Again!</h1>
);
}

如果嘗試使用上面的代碼運行應(yīng)用程序，則會遇到錯誤，指出必須將Adjacent JSX元素包裝在一個封閉的標(biāo)記中，這意味著您需要將兩個元素都包裝在父div中。

function App() {
return (
<div>
<h1>Hello React!</h1>
<h1>Hello React Again!</h1>
</div>
);
}

這樣做可以修復(fù)錯誤，但是會帶來一定程度的風(fēng)險。 您正在向DOM添加一個額外的節(jié)點，這不是必需的。 在這樣的情況下，以上是將被包含在父組件內(nèi)的子組件，這將成為問題。

function Table() {
return (
<table>
<td>This is a Table Component</td>
<Columns />
</table>
);
}

function Columns() {
return (
<div>
<td>Hello React!</td>
<td>Hello React Again!</td>
</div>
);
}

由于添加了額外的div，因此Table組件的結(jié)果HTML將無效。

function Table() {
return (
<table>
<td>This is a Table Component</td>
<div>
<td>Hello React!</td>
<td>Hello React Again!</td>
</div>
</table>
);
}

看一下使用React Fragment解決此問題的更好方法，該方法不會在DOM中添加任何其他節(jié)點。 語法如下所示：

function Columns() {
return (
<React.Fragment>
<td>Hello React!</td>
<td>Hello React Again!</td>
</React.Fragment>
);
}

您也可以使用短語法<> </>來聲明一個Fragment。

function Columns() {
return (
<>
<td>Hello React!</td>
<td>Hello React Again!</td>
</>
);
}

使用Production Build

優(yōu)化React應(yīng)用程序的另一種方法是確保在部署之前將您的應(yīng)用程序捆綁在生產(chǎn)環(huán)境中，默認情況下，您的應(yīng)用程序處于開發(fā)模式，這意味著React將包含有用的警告。這在您進行開發(fā)時非常有用，但它可能會使您的應(yīng)用變大、響應(yīng)速度也比平時慢。如果您的項目是使用create-react-app構(gòu)建的，則可以通過在部署之前運行npm run build來解決此問題，這將在可部署的build /文件夾中創(chuàng)建應(yīng)用程序的生產(chǎn)就緒版本。您可以使用React Developer Tools確認您的應(yīng)用程序處于開發(fā)還是生產(chǎn)模式。

如果React圖標(biāo)為帶有深色背景的藍色，則表明您的應(yīng)用處于生產(chǎn)模式。

如果您的React應(yīng)用處于開發(fā)模式，則圖標(biāo)將切換為紅色背景，如下圖所示。

另外值得注意的是，如果您通過CDN使用React，則應(yīng)記住將React從開發(fā)文件更新為適合生產(chǎn)的文件。

<script src="http://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="http://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

使用React.Suspense和React.Lazy延遲加載組件

延遲加載是一種用于優(yōu)化和加快應(yīng)用程序渲染時間的出色技術(shù)，延遲加載的想法是僅在需要時才加載組件。 React與React.lazy API捆綁在一起，因此您可以將動態(tài)導(dǎo)入呈現(xiàn)為常規(guī)組件，而不是像這樣加載常規(guī)組件：

import LazyComponent from './LazyComponent';

您可以通過使用惰性方法來呈現(xiàn)組件來降低性能風(fēng)險。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

React.lazy采用了必須調(diào)用動態(tài)import()的函數(shù)，然后這將返回一個Promise，該Promise解析為一個帶有默認導(dǎo)出的模塊，該模塊包含一個React組件。

lazy組件應(yīng)呈現(xiàn)在Suspense組件內(nèi)，這允許您在等待lazy組件加載時將回退內(nèi)容添加為加載狀態(tài)。

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading....</div>}>
<LazyComponent />
</Suspense>
</div>
);
}

使用React.memo進行組件記憶

React.memo是優(yōu)化性能的好方法，因為它有助于緩存功能組件。

它的工作原理是：使用此技術(shù)呈現(xiàn)函數(shù)時，它將結(jié)果保存在內(nèi)存中，并且下次調(diào)用具有相同參數(shù)的函數(shù)時，它返回保存的結(jié)果，而無需再次執(zhí)行該函數(shù)，從而節(jié)省了帶寬。

在React的上下文中，函數(shù)是功能組件，參數(shù)是道具。 這是一個例子：

import React from 'react';

const MyComponent = React.memo(props => {
/* render only if the props changed */
});

React.memo是一個高階組件，與React.PureComponent相似，但使用的是功能組件而不是類。

使用react-window虛擬化大型列表

當(dāng)您要呈現(xiàn)巨大的表或數(shù)據(jù)列表時，可能會大大降低應(yīng)用程序的性能。虛擬化可以借助諸如react-window之類的庫在這種情況下提供幫助，react-window通過僅呈現(xiàn)列表中當(dāng)前可見的項目來幫助解決此問題，從而可以有效地呈現(xiàn)任何大小的列表。

import React from 'react';
import { FixedSizeList as List } from 'react-window';
import './style.css';

const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style=/templates/>
Row {index}
</div>
);
const Example = () => (
<List
className="List"
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);