Teknik Penting untuk Mengoptimumkan Aplikasi React untuk Prestasi Lebih Baik

WBOY
Lepaskan: 2024-08-07 09:35:50
asal
945 orang telah melayarinya

Essential Techniques to Optimize React Applications for Better Performance

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 membantu dalam menyampaikan aplikasi berprestasi tinggi tetapi juga dalam mengekalkan kebolehskalaan dan responsif apabila aplikasi anda berkembang. Mari selami dan ketahui cara memanfaatkan aplikasi React anda sepenuhnya dengan mengoptimumkan prestasinya.

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

React.memo ialah komponen tertib lebih 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 
Count: {count}
; }); const App = () => { const [count, setCount] = useState(0); const [text, setText] = useState(''); return (
setText(e.target.value)} placeholder="Type something" />
); }; export default App;
Salin selepas log masuk
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 
Result: {result}
; }; const App = () => { const [num, setNum] = useState(1); const [text, setText] = useState(''); return (
setText(e.target.value)} placeholder="Type something" />
); }; export default App;
Salin selepas log masuk
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 ; }); const App = () => { const [count, setCount] = useState(0); const [text, setText] = useState(''); const increment = useCallback(() => { setCount((prevCount) => prevCount + 1); }, []); return ( 
); }; export default App;
Salin selepas log masuk
Penjelasan
  • Mengklik butang "Kiraan Pertambahan" mencetuskan fungsi kenaikan, dan komponen Butang tidak dipaparkan semula tanpa perlu.
  • Menaip dalam medan input tidak menyebabkan komponen Butang untuk 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 ( 

Welcome to My App

{/* Suspense component wraps the lazy loaded component */} Loading...
}>
); }; export default App;
Salin selepas log masuk
Penjelasan
1. React.malas:
  • React.lazy digunakan untuk mengimport LazyComponent secara dinamik.
  • Penyata import mengembalikan janji yang diselesaikan kepada komponen.
2. Suspens:
  • Komponen Suspense digunakan untuk membalut komponen yang malas dimuatkan.
  • 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 (  

My App with React Router

Loading...
}> } /> } />
); }; export default App;
Salin selepas log masuk
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 }) => ( 
Row {index}
); const App = () => { return ( ); }; export default App;
Salin selepas log masuk
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 ( 
); }; export default App;
Salin selepas log masuk
- 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 ( 
Scroll down to see the effect
); }; export default App;
Salin selepas log masuk
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 ( 
Lazy Loaded
); }; export default LazyImage;
Salin selepas log masuk
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:  // Optimized Code: // Use useCallback to memoize the function const handleClick = useCallback(() => { setCount((prevCount) => prevCount + 1); }, []);  // 2. Inline Object Literals // Problematic Code: 

Age: {age}

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

Age: {age}

Salin selepas log masuk
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.

    {items.map((item) => (
  • {item}
  • ))}
Salin selepas log masuk
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.

      {items.map((item, index) => (
    • {item}
    • ))}
    Salin selepas log masuk
    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.

      {items.map((item) => (
    • {item.name}
    • ))}
    Salin selepas log masuk
    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 Penyampaian: 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 dengan sangat baik, yang membawa kepada masa pemuatan yang lebih pantas, interaksi yang lebih lancar dan pengalaman pengguna yang dipertingkatkan 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!

  • sumber:dev.to
    Artikel sebelumnya:Berbual dengan HTMX, WebSockets dan Hono Artikel seterusnya:Teknik teratas untuk Melindungi Apl Web daripada Perlaksanaan JavaScript Tanpa Kebenaran
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!