時(shí)間是一種寶貴的資產(chǎn)，如果您的 Web 應(yīng)用程序需要不必要的耐心來吸引用戶的注意力，那么任何用戶都不會(huì)愿意浪費(fèi)它。React 是一種流行的框架，開發(fā)人員認(rèn)為它可以提高渲染性能。這就是為什么像 LinkedIn、DropBox、CSDN、百度等大公司都將 React 用于他們的 Web 應(yīng)用程序的原因。

然而，React 甚至渲染了許多不相關(guān)的組件來解決此類性能問題；開發(fā)人員可以通過考慮一些主要措施并暗示它們來巧妙地和有意識(shí)地確保React 性能優(yōu)化方法。

改進(jìn)和提升 React 性能的 11 種行之有效的方法

我們推薦一些很好的React 性能優(yōu)化技術(shù)來克服昂貴的 DOM 操作。找出方法。

1. React 應(yīng)用程序中的窗口或列表虛擬化

許多具有或顯示長列表的 React 應(yīng)用程序通常會(huì)遇到性能問題。在加載應(yīng)用程序之前，整個(gè)列表將在 DOM 中呈現(xiàn)，導(dǎo)致 UI 滯后并嚴(yán)重影響 React.js 應(yīng)用程序性能。

克服此瓶頸的一種方法是通過列表虛擬化或窗口化。在這里，我們不在應(yīng)用程序屏幕上呈現(xiàn)完整的長列表組件，而是只允許在 DOM 上呈現(xiàn)有限的項(xiàng)目列表，因?yàn)樗强梢姷摹?/span>

可用于窗口化的兩個(gè)庫是 react-window 和 react-virtualized；您將啟用在應(yīng)用程序屏幕上呈現(xiàn)大量列表的一小部分。您的React 應(yīng)用程序性能將即興發(fā)揮。

2. 列表渲染的關(guān)鍵配合

在 React 中使用列表時(shí)，您可以將關(guān)鍵屬性分配給有助于呈現(xiàn)即將到來的 ist 項(xiàng)目的元素。

在動(dòng)態(tài)列表的情況下，如果開發(fā)人員錯(cuò)誤地將組件鍵分配給列表元素，它就會(huì)對(duì)用戶有用，從而成為 React 應(yīng)用程序的性能障礙。這里，新的列表?xiàng)l目會(huì)自動(dòng)提示之前的列表?xiàng)l目，這是不必要的。

您必須為您的列表組件分配一個(gè)唯一的鍵值來解決這個(gè)瓶頸。因此，為您的動(dòng)態(tài)列表使用 Key={ } 以提高 React 應(yīng)用程序的性能。

3. 在 React 中延遲加載圖片

當(dāng)您的 React 應(yīng)用程序包含許多圖像時(shí)，您的 React 應(yīng)用程序性能很可能會(huì)下降。發(fā)生這種情況是因?yàn)?DOM 會(huì)在顯示用戶屏幕之前完全渲染所有圖像。因此我們建議使用延遲加載圖像，它會(huì)等到輪到圖像出現(xiàn)在用戶屏幕上時(shí)才渲染該特定圖像。

延遲加載圖像可以防止創(chuàng)建不必要的 DOM 節(jié)點(diǎn)，就像我們討論的窗口化一樣。用于延遲加載以提高 React 性能的流行庫是react-lazyload和react-lazy-load-image-component。

您是否仍然認(rèn)為圖像正在對(duì)您的 React Js 應(yīng)用程序造成嚴(yán)重破壞？
聘請(qǐng)我們的 React 開發(fā)人員并在您見證他們提高您的 React 應(yīng)用程序性能時(shí)退縮

4. 功能組件&組件交互

優(yōu)化 React 應(yīng)用程序性能的微妙方法是使用功能組件。雖然這聽起來很陳詞濫調(diào)，但它是快速構(gòu)建高效和高性能 React 應(yīng)用程序的最直接且經(jīng)過驗(yàn)證的策略。

我們的 React 專家在使用組件時(shí)有一些建議。

使用像 React Devtools（擴(kuò)展）這樣的 React 組件的一些優(yōu)點(diǎn)是：
?? 需要更少的代碼，
?? 易于理解，
?? 組件是無狀態(tài)的，
?? 易于測試，
?? 提取更小組件的靈活性，以及
?? 交互性

5. 了解如何處理“這個(gè)”

功能組件不需要“this”綁定，您可能希望盡可能使用它們。但是，如果你使用 ES6 綁定，React 不會(huì)自動(dòng)綁定組件中的函數(shù)。但是，您可以手動(dòng)實(shí)現(xiàn)綁定。以下是綁定組件和函數(shù)的一些方法：

?? 在渲染中綁定
?? 在渲染中允許箭頭函數(shù)
?? 在構(gòu)造函數(shù)中綁定
?? 在類屬性中綁定箭頭函數(shù) [不在官方 ECMAscript 中]

6. 在“SetState”中使用函數(shù)

我們建議在 setState 函數(shù)中使用函數(shù)而不是對(duì)象。這個(gè)建議是因?yàn)闋顟B(tài)更改不會(huì)立即暗示，正如 React 文檔所傳達(dá)的那樣。因此，而不是這個(gè)：

this.setState({correctData: !this.state.correctData});

使用這種方式：

this.setState((prevState, props) => {
    返回 {correctData: !prevState.correctData});
  }

上面的函數(shù)將接收先前的狀態(tài)作為其第一個(gè)參數(shù)，并將應(yīng)用更新時(shí)的道具作為第二個(gè)參數(shù)。

7.利用道具類型

Prop-types 是一個(gè)用于 props 類型檢查的庫。下面的代碼片段展示了如何從 prop-type 庫中導(dǎo)入函數(shù)：

從“prop-types”導(dǎo)入 PropTypes；類歡迎擴(kuò)展組件{
   使成為（） {
     返回 <h1>你好，{this.props.name}</h1>;
   }
  }
 Welcome.propTypes = {
    名稱：PropTypes.string.isRequired
  }

8. 修剪 Javascript 包

如果你想消除代碼冗余，學(xué)習(xí)修剪你的 Javascript 包。當(dāng)您切斷重復(fù)和不必要的代碼時(shí)，您的 React 應(yīng)用程序性能的可能性會(huì)成倍增加。您必須分析和確定捆綁代碼。

9. 服務(wù)器端渲染（SSR）

嘗試有意識(shí)地使用 SSR 并檢查您的應(yīng)用程序是否真的需要 SEO。SSR 占用了巨大的負(fù)載，所以如果你在不需要的時(shí)候避免使用它，你將會(huì)得到祝福。

10. React Redux 優(yōu)化技巧

雅虎面臨的一個(gè)眾所周知的缺陷是使用 Redux 構(gòu)建 React 應(yīng)用程序時(shí)需要考慮的經(jīng)典示例。事實(shí)上，這種組合是致命的，可以使復(fù)雜的情況結(jié)構(gòu)化，但是當(dāng)你使用 Redux 時(shí)，你的 React 應(yīng)用程序會(huì)重新渲染并降低你的性能。

我們將分享兩種使用 React Redux 應(yīng)用程序克服這一挑戰(zhàn)的方法。第一個(gè)是當(dāng) React 應(yīng)用程序中的高階組件被分配用于渲染操作時(shí)使用RESELECT庫。雅虎通過使用這個(gè)庫而受益匪淺。

另一種優(yōu)化React Redux 應(yīng)用程序性能的方法是使用 Immutable.js。不可變列表的性能比可變列表高得多（最多 4 倍）。當(dāng)您在 Redux 應(yīng)用程序中使用可變數(shù)據(jù)結(jié)構(gòu)時(shí)，Redux 狀態(tài)樹會(huì)消耗大量內(nèi)存來復(fù)制數(shù)據(jù)，從而影響應(yīng)用程序的性能。

使用不可變數(shù)據(jù)結(jié)構(gòu)不會(huì)更新原始數(shù)據(jù)，而是會(huì)在需要時(shí)生成更新數(shù)據(jù)結(jié)構(gòu)的新版本。這種技術(shù)極大地提高了 React 的性能。

11. 使用 React Memo [Memoization] 提高 React App 性能

在這里，我們將介紹如何使用 React 備忘錄來優(yōu)化 React 應(yīng)用程序性能的基本概述。

[注意：React.memo 與 useMemo 不同。人們經(jīng)常因?yàn)樗麄兊拿侄煜@兩者。]

什么是 React.memo？

我們都知道 react 應(yīng)用程序中 render 方法的重量。我們不是嗎？我們知道在沒有任何重大更改的情況下渲染組件的后果。因此，請(qǐng)考慮這樣一種情況，即使您的輸入道具相同，您也會(huì)渲染一個(gè)類組件。合適嗎？顯然，不是！當(dāng)輸入道具是常量時(shí)，你為什么要調(diào)用如此繁重的渲染方法？在這種特殊情況下，您應(yīng)該使用 PureComponent 或 shouldComponentUpdate()。等等，這是類組件的場景；功能（無狀態(tài)）組件呢？不用擔(dān)心; 也有一個(gè)解決方案：React.Memo。

React.memo：高階組件。

如果您的功能組件因?yàn)榻邮盏较嗤妮斎氲谰叨尸F(xiàn)完全相同的結(jié)果，您可以將其包裝到 React.memo 中以提高性能。這意味著 React 會(huì)將上次渲染與當(dāng)前渲染進(jìn)行比較，如果沒有發(fā)現(xiàn)任何變化，它將跳過渲染組件。這將有助于提高 React 應(yīng)用程序的性能。你可以將你的功能組件包裝到 React.memo 中，如下所示：

const MyExampleOfMemo = React.memo(function MyComponent(props) {
  /* 使用道具渲染 */});

如果您選擇不傳遞任何第二個(gè)參數(shù)，React 將使用其默認(rèn)行為進(jìn)行比較：對(duì) props 對(duì)象中的復(fù)雜對(duì)象進(jìn)行淺層比較。但是，如果您決定傳遞第二個(gè)參數(shù)，那么您就可以控制比較（即您可以自定義比較函數(shù)）

函數(shù) MyExampleComponent(props) {
  /* 使用道具渲染 */}函數(shù) equalOrNot(prevProps, nextProps) {
  /*
  如果要渲染的 nextProps 返回，它將返回 true
  與 prevProps 渲染的結(jié)果相同，
  否則返回假
  */}導(dǎo)出默認(rèn) React.memo(MyExampleComponent, equalOrNot);

使用 React.memo 時(shí)要小心。因?yàn)樗鼤?huì)產(chǎn)生錯(cuò)誤。

讓我們舉一個(gè)簡單的例子，來說明 React.Memo 的需求。

讓我們制作一個(gè)每秒使用 setState() 的小應(yīng)用程序：每秒調(diào)用 render。我知道這是不可行的，但這只是為了弄清楚為什么我們需要 React.memo。

類 App 擴(kuò)展組件 {
  cities = ["孟買", "班格洛爾", "德里"];
  state = { city: "匿名" };
  componentDidMount() {
    設(shè)置間隔（（）=> {
      const city = this.generateCity();
      this.setState({ 城市 });
    }, 1000);
  }
  生成城市 = () =>
    this.cities[Math.floor(Math.random() * this.cities.length)];
  使成為（） {
    返回 <View city="Kolkata" />;
  }}

在這里，我們可以看到我們?cè)?componentDidMount() 中調(diào)用了一個(gè)名為 setInterval 的函數(shù)。這確實(shí)從城市數(shù)組中設(shè)置了城市名稱，因?yàn)槲覀冇辛硪粋€(gè)函數(shù)叫做 generateCity()。

要記住的是 setState() 將每秒調(diào)用一次，因此組件將每秒重新渲染一次。因此，無論城市是硬編碼的，我們的 View 組件也會(huì)被渲染?？尚袉?？當(dāng)然不是。

const View = ({ city }) => `城市名:: ${city}`;

這沒有意義。如果道具保持不變，為什么我們要重新渲染一個(gè)組件（這里是視圖組件）？

現(xiàn)在，我們從上面提到的內(nèi)容中了解到記憶的概念。如果 props 的值不變，我們可以使用 React.memo 來限制組件的渲染。

讓我們將 <View/> 組件包裝在一個(gè)備忘錄中。

從“反應(yīng)”導(dǎo)入{備忘錄}；const View = memo(({ city }) => `城市名:: ${city}`);

現(xiàn)在，我們可以注意到 <View/> 組件只會(huì)渲染一次，因?yàn)?prop city 的值沒有改變。

這是道具被硬編碼時(shí)的場景。讓我們看看如果我們選擇用狀態(tài)值替換硬編碼值會(huì)發(fā)生什么。

在函數(shù) generateCity() 中，城市的值是從城市數(shù)組中隨機(jī)選擇的。

因此，每當(dāng)將相同的值分配給城市時(shí)，<View/>組件將不會(huì)呈現(xiàn)，因?yàn)槌鞘袑傩詫⒁虼吮３窒嗤闹怠?/span>

記憶化??！

不要混淆 React.memo 和 useMemo。

不要繼續(xù)他們的名字；他們有不同的功能。

可以說 React.memo 和 useMemo 都使用了 Memoization 的概念，但仍然保持著各自的個(gè)性。

React.memo 通過控制各個(gè)組件的渲染來優(yōu)化 React App 的性能。您可以控制整個(gè)組件：是否渲染它。

另一方面，useMemo 不提供如此廣泛的控制。它用于更一般的目的，并打算返回記憶值。useMemo 是一個(gè)鉤子，有通用的使用規(guī)則。底線是，React.memo 通過避免那些 prop 不會(huì)改變的渲染來優(yōu)化 React 應(yīng)用程序。但是在優(yōu)化性能時(shí)要小心，因?yàn)樗赡軙?huì)產(chǎn)生錯(cuò)誤。

結(jié)論

（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)，歡迎資訊！