有哪些優(yōu)化React App性能的技巧

這篇文章主要講解了“有哪些優(yōu)化React App性能的技巧”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“有哪些優(yōu)化React App性能的技巧”吧！

Kendo UI最新版下載

Kendo UI致力于新的開(kāi)發(fā)，來(lái)滿足不斷變化的需求，通過(guò)React框架的Kendo UI JavaScript封裝來(lái)支持React Javascript框架。Kendo UI for React能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

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

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

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

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

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

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

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

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將無(wú)效。

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解決此問(wèn)題的更好方法，該方法不會(huì)在DOM中添加任何其他節(jié)點(diǎn)。 語(yǔ)法如下所示：

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

您也可以使用短語(yǔ)法<> </>來(lái)聲明一個(gè)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)境中，默認(rèn)情況下，您的應(yīng)用程序處于開(kāi)發(fā)模式，這意味著React將包含有用的警告。這在您進(jìn)行開(kāi)發(fā)時(shí)非常有用，但它可能會(huì)使您的應(yīng)用變大、響應(yīng)速度也比平時(shí)慢。如果您的項(xiàng)目是使用create-react-app構(gòu)建的，則可以通過(guò)在部署之前運(yùn)行npm run build來(lái)解決此問(wèn)題，這將在可部署的build /文件夾中創(chuàng)建應(yīng)用程序的生產(chǎn)就緒版本。您可以使用React Developer Tools確認(rèn)您的應(yīng)用程序處于開(kāi)發(fā)還是生產(chǎn)模式。

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

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

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

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

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

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

import LazyComponent from './LazyComponent';

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

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

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

lazy組件應(yīng)呈現(xiàn)在Suspense組件內(nèi)，這允許您在等待lazy組件加載時(shí)將回退內(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進(jìn)行組件記憶

React.memo是優(yōu)化性能的好方法，因?yàn)樗兄诰彺婀δ芙M件。

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

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

import React from 'react';

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

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

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

當(dāng)您要呈現(xiàn)巨大的表或數(shù)據(jù)列表時(shí)，可能會(huì)大大降低應(yīng)用程序的性能。虛擬化可以借助諸如react-window之類(lèi)的庫(kù)在這種情況下提供幫助，react-window通過(guò)僅呈現(xiàn)列表中當(dāng)前可見(jiàn)的項(xiàng)目來(lái)幫助解決此問(wèn)題，從而可以有效地呈現(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={style}>
Row {index}
</div>
);
const Example = () => (
<List
className="List"
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);

感謝各位的閱讀，以上就是“有哪些優(yōu)化React App性能的技巧”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)有哪些優(yōu)化React App性能的技巧這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！