資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究最佳化 ReactJS 應用程式
在本文中，我們將瞭解最佳化 React 應用程式的方法。
要建立一個真實的 React 應用程式，最佳化程式碼對於提高效能至關重要。最佳化 React 應用程式的方法有很多，但以下是一些最常用的方法：
記憶化
這是一種透過將結果儲存為快取來加速應用程式的技術，只有當輸入發生變化時才會再次呼叫函式，否則返回快取的結果。
對於函式式元件，使用 **React.memo()**。此方法用於僅在傳遞給元件的 props 發生變化時重新渲染元件。
示例
export default React.memp(App)
對於基於類的元件，使用 **shouldComponentUpdate** 方法。
示例
Class Person extends React.Component{
shouldComponentUpdate(nextProps,nextState){
if(nextProps.data!==this.props.data){
return true;
}
return false;
}
}使用 React.PureComponent
此方法主要用於最佳化效能，僅當傳遞給元件的狀態或 props 發生變化時才重新渲染元件。
示例
Class Person extends React.PureComponent{}快取函式
透過使用 **useCallbacks**，我們可以極大地最佳化 React 應用程式，以便它僅在輸入發生變化時返回更新的結果，否則返回快取的資料。
示例
Const value = useCallback((a,b)=>return a+b,[a,b])
懶載入
透過延遲載入 ReactJS 應用程式中不太必要的元件，我們可以極大地最佳化 React 應用程式，因為它可以減少 DOM 載入時間並減小包大小。
示例
Const Person = React.lazy(()=>import(‘./Person.js’))
使用不可變資料結構
透過以不可變的方式更改狀態，我們可以確保防止時間耦合，並且還可以輕鬆跟蹤狀態的變化。
state={
user:
{
name: 'Rahul Bansal',
id: '01'
}
}不可變地更改狀態
this.setState({
user: ...this.state.user,
{
name: 'TutorialsPoint'
}
})為了確保不可變性，我們還可以使用 Immutable.js 等第三方依賴項。
使用 React.Fragments
與其使用額外的 **<div>** 標籤，我們可以使用 **<React.Fragment>** 來對子標籤進行分組，而無需額外的節點。
示例
return ( <React.Fragment> <h1>TutorialsPoint</h1> <React.Fragment/> )
更新於: 2021年3月18日
182 次瀏覽
廣告