有哪些優化React App性能的技巧

這篇文章主要講解了“有哪些優化React App性能的技巧”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“有哪些優化React App性能的技巧”吧！

Kendo UI最新版下載

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

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

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

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

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

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

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

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

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組件的結果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中添加任何其他節點。 語法如下所示：

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

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

如果React圖標為帶有深色背景的藍色，則表明您的應用處于生產模式。

如果您的React應用處于開發模式，則圖標將切換為紅色背景，如下圖所示。

另外值得注意的是，如果您通過CDN使用React，則應記住將React從開發文件更新為適合生產的文件。

<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延遲加載組件

延遲加載是一種用于優化和加快應用程序渲染時間的出色技術，延遲加載的想法是僅在需要時才加載組件。 React與React.lazy API捆綁在一起，因此您可以將動態導入呈現為常規組件，而不是像這樣加載常規組件：

import LazyComponent from './LazyComponent';

您可以通過使用惰性方法來呈現組件來降低性能風險。

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

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

lazy組件應呈現在Suspense組件內，這允許您在等待lazy組件加載時將回退內容添加為加載狀態。

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是優化性能的好方法，因為它有助于緩存功能組件。

它的工作原理是：使用此技術呈現函數時，它將結果保存在內存中，并且下次調用具有相同參數的函數時，它返回保存的結果，而無需再次執行該函數，從而節省了帶寬。

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

import React from 'react';

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

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

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

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

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>
);

感謝各位的閱讀，以上就是“有哪些優化React App性能的技巧”的內容了，經過本文的學習后，相信大家對有哪些優化React App性能的技巧這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！