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

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

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

}> } /> } />

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;

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;

// 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}