ReactJS - 效能最佳化

上一頁
下一頁

React 內部處理應用程式的效能並在每次機會上進行最佳化。作為開發人員，我們可以做一些事情來獲得應用程式的最大效能。在本章中，讓我們瞭解一些從 React 庫中獲得最大效能的技術。

效能最佳化技術

以下是其中一些效能最佳化技術：

使用生產版本 - React 有兩種模式，開發模式和生產模式。開發模式是為開發人員準備的，開發模式為開發人員提供了許多有用的功能，以便更好地瞭解應用程式內部並除錯應用程式。這會降低應用程式速度。為了獲得最大效能，啟用生產模式並部署應用程式。

CDN 使用 cdn 連結 React 庫的應用程式應使用 React 庫的生產版本，如下所示：

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

Create React App - 使用 create-react-app CLI 建立的應用程式可以使用以下命令建立應用程式的生產版本。

npm run build

Brunch - 使用 brunch 的應用程式應安裝 terser-brunch 外掛，然後呼叫生產版本以獲得高效且高效能的程式碼。

npm install --save-dev terser-brunch
brunch build -p

Rollup - 使用 rollup 的應用程式應安裝 commonjs、replace 和 terser 外掛並進行配置以獲得最佳生產版本。

npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

使用 React Devtools - React 為所有瀏覽器提供開發工具作為擴充套件。安裝擴充套件程式後，瀏覽器的開發者工具部分將顯示一個專門用於 React 的部分。React 擴充套件程式提供的工具之一是 Profiler（React DevTool Profiler）。在將應用程式部署到生產環境之前，可以對其進行分析和最佳化。

視窗技術 - 如果要在前端顯示的資料量很大，則應用程式的效能會立即受到影響。一種方法是透過分頁和其他類似技術僅顯示一小部分資料。如果這些技術不可行，React 建議使用視窗技術，它會自動一次渲染一小部分資料。我們將在本章後面學習如何應用視窗技術。

避免協調 (shouldComponentUpdate) - 協調是一種強大的技術，可以提高 React 應用程式的效能。儘管如此，協調仍然需要一些時間來執行並在我們的應用程式中應用它。跳過渲染（以及隨後的協調）將提高效能。React 提供了一個 API，shouldComponentUpdate，以提示 React 核心是否跳過或繼續渲染。以下程式碼將跳過應用程式的渲染

shouldComponentUpdate(nextProps, nextState) {
   return false;
}

元件可以分析其當前狀態和 props 與更新後的狀態和 props，並決定是否可以跳過渲染部分。

純元件 - 而不是編寫shouldComponentUpdate，透過擴充套件 React.PureComponent 來編寫元件的純版本。如果給定的輸入相同，純元件通常會發出相同的輸出。純元件將進行淺比較並跳過協調。但是，有一個問題。如果更改不是淺更改，則 React 將跳過更新和渲染。要解決此問題，只需透過可見的變異進行更改，如下所示：

// non-mutation (wrong way to code)
const words = this.state.words;
words.push('john');
this.setState({words: words});

// mutated version (right way to code)
this.setState(state => ({
   words: state.words.concat(['marklar'])
}));

這裡，

  • 在程式碼的第一個版本中，物件未發生變異。因此，與舊物件的比較成功並跳過協調。

  • 在程式碼的第二個版本中，物件發生了變異，並且將在比較過程中被捕獲。

應用視窗技術

在本節中，讓我們建立一個新的 React 應用程式，透過應用視窗技術來渲染大型使用者列表。

首先，使用以下命令建立一個新的 React 應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 bootstrap 和 react-bootstrap 庫，

npm install --save react-window

接下來，開啟App.css（src/App.css）並刪除所有 CSS 類。

// remove all css classes

接下來，在public資料夾下建立一個檔案 users.json，並使用以下使用者資訊填充它，

[
   {
      "id":1,
      "name":"Fowler",
      "age":18
   },
   {
      "id":2,
      "name":"Donnell",
      "age":24
   },
   {
      "id":3,
      "name":"Pall",
      "age":26
   },
   {
      "id":4,
      "name":"Christos",
      "age":19
   },
   {
      "id":5,
      "name":"Dud",
      "age":29
   },
   {
      "id":6,
      "name":"Rayner",
      "age":22
   },
   {
      "id":7,
      "name":"Somerset",
      "age":31
   },
   {
      "id":8,
      "name":"Stavros",
      "age":32
   },
   {
      "id":9,
      "name":"Cody",
      "age":19
   },
   {
      "id":10,
      "name":"Sharai",
      "age":19
   },
   {
      "id":11,
      "name":"Kristo",
      "age":28
   },
   {
      "id":12,
      "name":"Harvey",
      "age":27
   },
   {
      "id":13,
      "name":"Christen",
      "age":27
   },
   {
      "id":14,
      "name":"Hillard",
      "age":19
   },
   {
      "id":15,
      "name":"Jaine",
      "age":32
   },
   {
      "id":16,
      "name":"Annabel",
      "age":29
   },
   {
      "id":17,
      "name":"Hildagarde",
      "age":29
   },
   {
      "id":18,
      "name":"Cherlyn",
      "age":18
   },
   {
      "id":19,
      "name":"Herold",
      "age":32
   },
   {
      "id":20,
      "name":"Gabriella",
      "age":32
   },
   {
      "id":21,
      "name":"Jessalyn",
      "age":32
   },
   {
      "id":22,
      "name":"Opal",
      "age":31
   },
   {
      "id":23,
      "name":"Westbrooke",
      "age":27
   },
   {
      "id":24,
      "name":"Morey",
      "age":22
   },
   {
      "id":25,
      "name":"Carleton",
      "age":26
   },
   {
      "id":26,
      "name":"Cosimo",
      "age":22
   },
   {
      "id":27,
      "name":"Petronia",
      "age":23
   },
   {
      "id":28,
      "name":"Justino",
      "age":32
   },
   {
      "id":29,
      "name":"Verla",
      "age":20
   },
   {
      "id":30,
      "name":"Lanita",
      "age":18
   },
   {
      "id":31,
      "name":"Karlik",
      "age":23
   },
   {
      "id":32,
      "name":"Emmett",
      "age":22
   },
   {
      "id":33,
      "name":"Abran",
      "age":26
   },
   {
      "id":34,
      "name":"Holly",
      "age":23
   },
   {
      "id":35,
      "name":"Beverie",
      "age":23
   },
   {
      "id":36,
      "name":"Ingelbert",
      "age":27
   },
   {
      "id":37,
      "name":"Kailey",
      "age":30
   },
   {
      "id":38,
      "name":"Ralina",
      "age":26
   },
   {
      "id":39,
      "name":"Stella",
      "age":29
   },
   {
      "id":40,
      "name":"Ronnica",
      "age":20
   },
   {
      "id":41,
      "name":"Brucie",
      "age":20
   },
   {
      "id":42,
      "name":"Ryan",
      "age":22
   },
   {
      "id":43,
      "name":"Fredek",
      "age":20
   },
   {
      "id":44,
      "name":"Corliss",
      "age":28
   },
   {
      "id":45,
      "name":"Kary",
      "age":32
   },
   {
      "id":46,
      "name":"Kaylee",
      "age":21
   },
   {
      "id":47,
      "name":"Haskell",
      "age":25
   },
   {
      "id":48,
      "name":"Jere",
      "age":29
   },
   {
      "id":49,
      "name":"Kathryne",
      "age":31
   },
   {
      "id":50,
      "name":"Linnea",
      "age":21
   },
   {
      "id":51,
      "name":"Theresina",
      "age":24
   },
   {
      "id":52,
      "name":"Arabela",
      "age":32
   },
   {
      "id":53,
      "name":"Howie",
      "age":22
   },
   {
      "id":54,
      "name":"Merci",
      "age":21
   },
   {
      "id":55,
      "name":"Mitchel",
      "age":30
   },
   {
      "id":56,
      "name":"Clari",
      "age":18
   },
   {
      "id":57,
      "name":"Laurena",
      "age":19
   },
   {
      "id":58,
      "name":"Odessa",
      "age":30
   },
   {
      "id":59,
      "name":"Pippy",
      "age":25
   },
   {
      "id":60,
      "name":"Wilmar",
      "age":23
   },
   {
      "id":61,
      "name":"Cherianne",
      "age":24
   },
   {
      "id":62,
      "name":"Huberto",
      "age":25
   },
   {
      "id":63,
      "name":"Ariella",
      "age":26
   },
   {
      "id":64,
      "name":"Lorant",
      "age":30
   },
   {
      "id":65,
      "name":"Francesca",
      "age":25
   },
   {
      "id":66,
      "name":"Ingamar",
      "age":28
   },
   {
      "id":67,
      "name":"Myrta",
      "age":27
   },
   {
      "id":68,
      "name":"Nicolette",
      "age":26
   },
   {
      "id":69,
      "name":"Petra",
      "age":22
   },
   {
      "id":70,
      "name":"Cyrill",
      "age":27
   },
   {
      "id":71,
      "name":"Ad",
      "age":23
   },
   {
      "id":72,
      "name":"Denys",
      "age":22
   },
   {
      "id":73,
      "name":"Karilynn",
      "age":23
   },
   {
      "id":74,
      "name":"Gunner",
      "age":30
   },
   {
      "id":75,
      "name":"Falkner",
      "age":20
   },
   {
      "id":76,
      "name":"Thurston",
      "age":19
   },
   {
      "id":77,
      "name":"Codi",
      "age":30
   },
   {
      "id":78,
      "name":"Jacob",
      "age":31
   },
   {
      "id":79,
      "name":"Gasparo",
      "age":26
   },
   {
      "id":80,
      "name":"Mitzi",
      "age":29
   },
   {
      "id":81,
      "name":"Rubetta",
      "age":21
   },
   {
      "id":82,
      "name":"Clary",
      "age":20
   },
   {
      "id":83,
      "name":"Oliviero",
      "age":24
   },
   {
      "id":84,
      "name":"Ranique",
      "age":21
   },
   {
      "id":85,
      "name":"Shae",
      "age":24
   },
   {
      "id":86,
      "name":"Woodrow",
      "age":20
   },
   {
      "id":87,
      "name":"Junia",
      "age":31
   },
   {
      "id":88,
      "name":"Athene",
      "age":26
   },
   {
      "id":89,
      "name":"Veriee",
      "age":18
   },
   {
      "id":90,
      "name":"Rickie",
      "age":30
   },
   {
      "id":91,
      "name":"Carly",
      "age":23
   },
   {
      "id":92,
      "name":"Vern",
      "age":19
   },
   {
      "id":93,
      "name":"Trix",
      "age":26
   },
   {
      "id":94,
      "name":"Lenore",
      "age":20
   },
   {
      "id":95,
      "name":"Hanna",
      "age":30
   },
   {
      "id":96,
      "name":"Dominique",
      "age":21
   },
   {
      "id":97,
      "name":"Karlotta",
      "age":22
   },
   {
      "id":98,
      "name":"Levey",
      "age":20
   },
   {
      "id":99,
      "name":"Dalila",
      "age":18
   },
   {
      "id":100,
      "name":"Launce",
      "age":21
   }
]

接下來，建立一個簡單的使用者列表元件，SimpleWindow（src/Components/SimpleWindow.js），並透過應用視窗功能來渲染使用者列表，如下所示：

import React from "react";
import { FixedSizeList as List } from 'react-window';
class SimpleWindow extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: []
      };
   }
   componentDidMount() {
      fetch("users.json")
         .then((response) => response.json())
         .then((data) => {
            this.setState({
               data: data
            });
         });
   }
   render() {
      return (
         <List
            innerElementType="ul"
            itemData={this.state.data}
            itemCount={this.state.data.length}
            itemSize={35}
            width={500}
            height={300}
         >
         {
            ({data, index, style}) => {
               return (
                  <li style={style}>
                     {data[index].name}
                  </li>
               )
            }
         }
         </List>
      )
   }
}
export default SimpleWindow

這裡我們有，

  • 將FixedSizeList元件匯入為List。

  • 在componentDidMount()生命週期事件中，使用fetch方法從users.json url獲取使用者列表。

  • 使用FixedSizeList元件渲染使用者列表。

  • innerElementType FixedSizeList元件的props指的是要在元件內部生成的元素。

  • itemData、itemCount和itemSize分別指的是專案列表、可用專案的總數和每個專案的大小。

接下來，開啟 App 元件（src/App.js），幷包含SimpleWindow元件，如下所示：

import './App.css'
import React from 'react';
import SimpleWindow from './Components/SimpleWindow'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleWindow />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡，

  • 使用import語句匯入我們的新元件SimpleWindow

  • 渲染我們的新SimpleWindow元件。

最後，在瀏覽器中開啟應用程式並檢查最終結果。表格元件將按如下所示渲染：

Applying Windowing Technique

總結

React 會開箱即用地最佳化應用程式。此外，React 庫在每個版本中都會改進最佳化。除了這些最佳化之外，我們還可以遵循上面討論的技術來從我們這邊改進效能。

列印頁面
上一頁
下一頁
廣告