Teknik Penting untuk Mengoptimumkan Aplikasi React untuk Prestasi Lebih Baik

pengenalan

Apabila aplikasi web moden berkembang dalam kerumitan, memastikan prestasi optimum menjadi semakin kritikal. React, perpustakaan JavaScript yang popular untuk membina antara muka pengguna, menawarkan pelbagai strategi untuk meningkatkan prestasi aplikasi. Sama ada anda sedang mengusahakan projek kecil atau aplikasi berskala besar, memahami dan melaksanakan teknik pengoptimuman ini boleh membawa kepada masa pemuatan yang lebih cepat, pengalaman pengguna yang lebih lancar dan penggunaan sumber yang lebih cekap.

Dalam siaran ini, kami akan meneroka teknik penting untuk mengoptimumkan aplikasi React, daripada pengurusan keadaan yang cekap dan meminimumkan pemaparan semula kepada memanfaatkan pemisahan kod dan pemuatan malas. Strategi ini bukan sahaja akan membantu dalam menyampaikan aplikasi berprestasi tinggi tetapi juga dalam mengekalkan kebolehskalaan dan responsif apabila aplikasi anda berkembang. Mari selami dan temui cara memanfaatkan aplikasi React anda sepenuhnya dengan mengoptimumkan prestasinya.

1. Gunakan React.memo: Menghalang pemaparan semula yang tidak perlu

React.memo ialah komponen tertib tinggi yang boleh membantu menghalang pemaparan semula komponen berfungsi yang tidak perlu. Ia berfungsi dengan menghafal output yang diberikan bagi komponen dan hanya memaparkannya semula jika propnya berubah. Ini boleh membawa kepada peningkatan prestasi yang ketara, terutamanya untuk komponen yang kerap dipaparkan tetapi prop yang tidak kerap berubah.

Contoh

Mari kita lihat contoh di mana kita menggunakan React.memo untuk mengelakkan paparan semula yang tidak perlu:

import React, { useState } from 'react';

// A functional component that displays a count
const CountDisplay = React.memo(({ count }) => {
  console.log('CountDisplay rendered');
  return <div>Count: {count}</div>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <CountDisplay count={count} />

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

Penjelasan

• Apabila anda mengklik butang "Kiraan Pertambahan", komponen CountDisplay akan dipaparkan semula kerana prop kiraannya berubah.
• Apabila anda menaip dalam medan input, komponen CountDisplay tidak akan dipaparkan semula kerana prop kiraannya kekal tidak berubah, walaupun komponen Apl induk memaparkan semula.

2. Gunakan useMemo dan gunakanCallback Hooks: Memoize pengiraan mahal

Penggunaan ReactMemo dan cangkuk useCallback digunakan untuk menghafal pengiraan dan fungsi yang mahal, menghalang pengiraan semula dan pemaparan semula yang tidak perlu. Cangkuk ini boleh meningkatkan prestasi dengan ketara dalam aplikasi React, terutamanya apabila berurusan dengan pengiraan yang rumit atau komponen yang kerap diberikan.

gunakanMemo

useMemo digunakan untuk menghafal nilai, jadi ia hanya dikira semula apabila salah satu kebergantungannya berubah.

Contoh

import React, { useState, useMemo } from 'react';

const ExpensiveCalculationComponent = ({ num }) => {
  const expensiveCalculation = (n) => {
    console.log('Calculating...');
    return n * 2; // Simulate an expensive calculation
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>Result: {result}</div>;
};

const App = () => {
  const [num, setNum] = useState(1);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increment Number</button>
      <ExpensiveCalculationComponent num={num} />

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

Penjelasan

• Mengklik butang "Nombor Kenaikan" mencetuskan pengiraan yang mahal dan anda akan melihat "Mengira..." dilog masuk dalam konsol.
• Menaip dalam medan input tidak mencetuskan pengiraan yang mahal, terima kasih kepada useMemo.

gunakanPanggil balik

useCallback digunakan untuk menghafal fungsi, jadi ia hanya dicipta semula apabila salah satu kebergantungannya berubah.

Contoh

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick, label }) => {
  console.log(`Rendering button - ${label}`);
  return <button onClick={handleClick}>{label}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <Button handleClick={increment} label="Increment Count" />
      <div>Count: {count}</div>

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something"
      />
    </div>
  );
};

export default App;

Penjelasan

• Mengklik butang "Kira Pertambahan" mencetuskan fungsi kenaikan dan komponen Butang tidak dipaparkan semula tanpa perlu.
• Menaip dalam medan input tidak menyebabkan komponen Butang dipaparkan semula, terima kasih kepada useCallback.

3. Pemuatan Malas dan Pemisahan Kod: Muatkan komponen secara dinamik

Pemuatan malas dan pemisahan kod ialah teknik yang digunakan dalam React untuk meningkatkan prestasi aplikasi anda dengan memuatkan komponen hanya apabila ia diperlukan. Ini boleh mengurangkan masa muat awal dan meningkatkan keseluruhan pengalaman pengguna.

- Lazy Loading dengan React.lazy dan Suspense

React menyediakan fungsi terbina dalam React.lazy untuk membolehkan pemuatan malas komponen. Ia membolehkan anda membahagikan kod anda kepada bahagian yang lebih kecil dan memuatkannya atas permintaan.

Contoh

import React, { Suspense } from 'react';

// Lazy load the component
const MyLazyComponent = React.lazy(() => import('./MayLazyComponent'));

const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>

      {/* Suspense component wraps the lazy loaded component */}
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

Penjelasan

1. React.malas:

• React.lazy digunakan untuk mengimport LazyComponent secara dinamik.
• Pernyataan import mengembalikan janji yang diselesaikan kepada komponen.

2. Suspens:

• Komponen Suspense digunakan untuk membalut komponen yang dimuatkan dengan malas.
• Ia menyediakan UI sandaran (Memuatkan...) untuk dipaparkan semasa komponen sedang dimuatkan.

- Pemisahan Kod dengan Penghala React.lazy dan React

Anda juga boleh menggunakan pemuatan malas dan pemisahan kod dengan Penghala Reaksi untuk memuatkan komponen laluan secara dinamik.

Contoh

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// Lazy load the components
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <div>
        <h1>My App with React Router</h1>

        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </Suspense>
      </div>
    </Router>
  );
};

export default App;

Penjelasan

• Komponen laluan muatan malas:
  React.lazy digunakan untuk mengimport komponen Laman Utama dan Perihal secara dinamik.

• Penghala Gantung dan Reaksi:
  Komponen Suspense membalut komponen Laluan untuk menyediakan UI sandaran semasa komponen laluan sedang dimuatkan.

4. Virtualize Long Lists: Renders only the visible items

Virtualizing long lists in React using libraries like react-window or react-virtualized can significantly improve performance by rendering only the visible items. This technique is essential for handling large datasets efficiently and ensuring a smooth user experience.

Example

import React from 'react';
import { List } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>
    Row {index}
  </div>
);

const App = () => {
  return (
    <List
      width={300}
      height={400}
      rowCount={1000}
      rowHeight={35}
      rowRenderer={rowRenderer}
    />
  );
};

export default App;

5. Debounce & Throttle Events: Limits the frequency of expensive operations

Debouncing and throttling are essential techniques to optimize performance in React applications by controlling the frequency of expensive operations. Debouncing is ideal for events like key presses, while throttling is more suited for continuous events like scrolling or resizing. Using utility libraries like Lodash can simplify the implementation of these techniques.

- Debounce

Debouncing ensures that a function is only executed once after a specified delay has passed since the last time it was invoked. This is particularly useful for events that trigger frequently, such as key presses in a search input field.

Example using Lodash

import React, { useState, useCallback } from 'react';
import debounce from 'lodash/debounce';

const App = () => {
  const [value, setValue] = useState('');

  const handleInputChange = (event) => {
    setValue(event.target.value);
    debouncedSearch(event.target.value);
  };

  const search = (query) => {
    console.log('Searching for:', query);
    // Perform the search operation
  };

  const debouncedSearch = useCallback(debounce(search, 300), []);

  return (
    <div>
      <input type="text" value={value} onChange={handleInputChange} />
    </div>
  );
};

export default App;

- Throttle

Throttling ensures that a function is executed at most once in a specified interval of time. This is useful for events like scrolling or resizing where you want to limit the rate at which the event handler executes.

Example using Lodash

import React, { useEffect } from 'react';
import throttle from 'lodash/throttle';

const App = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scrolling...');
      // Perform scroll operation
    }, 200);

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ height: '2000px' }}>
      Scroll down to see the effect
    </div>
  );
};

export default App;

6. Optimize Images and Assets: Reduces the load time

Optimizing images and assets involves compressing files, using modern formats, serving responsive images, and implementing lazy loading. By following these techniques, you can significantly reduce load times and improve the performance of your React application.

Use the loading attribute for images to enable native lazy loading or use a React library like react-lazyload.

Example

import React from 'react';
import lazyImage from './lazy-image.webp';

const LazyImage = () => {
  return (
    <div>
      <img
        src={lazyImage}
        alt="Lazy Loaded"
        loading="lazy" // Native lazy loading
        style={{ width: '100%', maxWidth: '300px' }}
      />
    </div>
  );
};

export default LazyImage;

7. Avoid Inline Functions and Object Literals:

Avoiding inline functions and object literals is important for optimizing performance in React applications. By using useCallback to memoize functions and defining objects outside of the render method, you can minimize unnecessary re-renders and improve the efficiency of your components.

Example

// 1. Inline Function

// Problematic Code:
 <button onClick={() => setCount(count + 1)}>Increment</button>

// Optimized Code:
  // Use useCallback to memoize the function
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

 <button onClick={handleClick}>Increment</button>

// 2. Inline Object Literals

// Problematic Code:
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <p>Age: {age}</p>
    </div>

// Optimized Code:
    const styles = {
         container: {
             padding: '20px',
             backgroundColor: '#f0f0f0',
        },
    };

    <div style={styles.container}>
      <p>Age: {age}</p>
    </div>

8. Key Attribute in Lists: React identify which items have changed

When rendering lists in React, using the key attribute is crucial for optimal rendering and performance. It helps React identify which items have changed, been added, or removed, allowing for efficient updates to the user interface.

Example without key attribute

In this example, the key attribute is missing from the list items. React will not be able to efficiently track changes in the list, which could lead to performance issues and incorrect rendering.

    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>

Example with key attribute as index

In the optimized code, the key attribute is added to each

element. The key value should be a unique identifier for each item. In this case, the index of the item is used as the key. However, it's recommended to use a unique identifier (e.g., item.id) if available, as using indices can cause issues if the list items are reordered or changed.

   <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>

Example with Unique Identifiers:

In this example, each list item has a unique id which is used as the key. This approach provides a more reliable way to track items and handle list changes, especially when items are dynamically added, removed, or reordered.

    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>

9. Use Production Build:

Always use the production build for your React app to benefit from optimizations like minification and dead code elimination.

Build Command: npm run build

10. Profile and Monitor Performance:

Profiling and monitoring performance are crucial for ensuring that your React application runs smoothly and efficiently. This involves identifying and addressing performance bottlenecks, ensuring that your application is responsive and performs well under various conditions.

- Use React Developer Tools

React Developer Tools is a browser extension that provides powerful tools for profiling and monitoring your React application. It allows you to inspect component hierarchies, analyze component renders, and measure performance.

- Analyze Performance Metrics

Use the performance metrics provided by React Developer Tools to identify slow components and unnecessary re-renders. Look for:

• Masa Rendering: Berapa lama setiap komponen mengambil masa untuk dipaparkan.
• Kemas Kini Komponen: Kekerapan komponen dipaparkan semula.
• Interaksi: Kesan interaksi pengguna terhadap prestasi

Fikiran Akhir

Melaksanakan teknik pengoptimuman ini boleh meningkatkan prestasi aplikasi React, yang membawa kepada masa pemuatan yang lebih cepat, interaksi yang lebih lancar dan pengalaman pengguna yang dipertingkat secara keseluruhan. Pemprofilan dan pemantauan yang kerap, digabungkan dengan penggunaan teknik ini dengan teliti, pastikan aplikasi React anda kekal berprestasi dan berskala semasa ia berkembang.

Atas ialah kandungan terperinci Teknik Penting untuk Mengoptimumkan Aplikasi React untuk Prestasi Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!