Untuk mengoptimumkan aplikasiReact, anda boleh menggunakan beberapa strategi utama yang memfokuskan pada prestasi, pengurangan saiz berkas, pemaparan yang cekap dan keseluruhan pengalaman pengguna. Berikut ialah pecahan teknik pengoptimuman khusus untuk React:

1.Pembahagian Kod

Pembahagian kod membolehkan anda memecahkan apl anda kepada bahagian yang lebih kecil yang boleh dimuatkan mengikut keperluan, dan bukannya memuatkan keseluruhan aplikasi sekali gus. Ini menambah baik masa muat awal.

• React.lazy: Gunakan ciri pemuatan malas terbina dalam React untuk mengimport komponen secara dinamik.

const LazyComponent = React.lazy(() => import('./Component')); function App() { return ( Loading...}>   ); }

• React-loadable: Sebagai alternatif, anda boleh menggunakan pustaka sepertireact-loadableuntuk pilihan pemisahan kod yang lebih maju.

2.Menghafal dan Mencegah Penyampaian Semula yang Tidak Perlu

Mengelakkan pemaparan semula yang tidak perlu adalah penting untuk meningkatkan prestasi dalam aplikasi React.

• React.memo: Balut komponen berfungsi dengan React.memo untuk menghalangnya daripada memaparkan semula jika prop mereka tidak berubah.

const MyComponent = React.memo(({ value }) => { return 
{value}
; });

• useMemo: Ingat pengiraan mahal supaya pengiraan itu tidak dikira semula pada setiap paparan melainkan perlu.

const computedValue = useMemo(() => expensiveComputation(value), [value]);

• useCallback: Memoize berfungsi untuk mengelak daripada menghantar rujukan baharu setiap kali, terutamanya apabila digunakan sebagai kebergantungan dalam komponen atau kesan anak.

const handleClick = useCallback(() => { console.log('Clicked'); }, []);

3.Gunakan Pengurusan Negeri yang Cekap

Mengendalikan keadaan dengan cara yang mengelakkan pemaparan yang tidak perlu boleh meningkatkan prestasi dengan sangat baik.

• useReducer: Untuk logik keadaan kompleks, pertimbangkan untuk menggunakan useReducer dan bukannya useState untuk lebih kawalan ke atas perubahan keadaan.

const [state, dispatch] = useReducer(reducer, initialState);

• Pecah Komponen: Pisahkan komponen supaya hanya bahagian yang diperlukan dipaparkan semula apabila keadaan berubah.

4.Virtualkan Senarai Panjang

Memaparkan senarai atau jadual yang panjang boleh melambatkan prestasi. Gunakan teknik virtualisasi senarai untuk hanya memaparkan perkara yang kelihatan pada skrin.

• react-windowataureact-virtualized: Pustaka ini membolehkan anda menghasilkan set data besar dengan cekap dengan memayakan senarai.

import { FixedSizeList as List } from 'react-window'; const MyList = ({ items }) => (  {({ index, style }) => 
{items[index]}
}  );

5.Pokok Bergegar

Pastikan aplikasi anda hanya mengimport bahagian perpustakaan yang sedang digunakan untuk mengurangkan saiz berkas.

• Import ES6: Import hanya modul yang anda perlukan daripada perpustakaan (seperti lodash, moment.js, dll.) dan bukannya keseluruhan pustaka.

// Instead of this: import _ from 'lodash'; // Do this: import debounce from 'lodash/debounce';

6.Malas Muatkan Imej

Imej selalunya merupakan aset terbesar pada halaman. Gunakan pemuatan malas untuk melengahkan pemuatan imej sehingga ia berada dalam port pandangan.

• react-lazyload: Gunakan pustakareact-lazyloaduntuk memuatkan imej malas yang mudah.

import LazyLoad from 'react-lazyload'; const ImageComponent = () => (    );

• Pemerhati Persimpangan: Anda juga boleh menggunakanAPI Pemerhati Persimpanganuntuk memuatkan imej dengan malas apabila ia kelihatan.

const LazyImage = ({ src, alt }) => { const [inView, setInView] = useState(false); const imgRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setInView(true); observer.disconnect(); } }); observer.observe(imgRef.current); }, []); return ; };

7.Kecilkan JavaScript

• GunakanTerseratau minifikasi terbina dalam Webpack untuk mengurangkan saiz berkas JavaScript anda semasa proses binaan.

• Buat Apl Reactsecara automatik mengecilkan kod untuk binaan pengeluaran:
  

npm run build

8.Analisis Himpunan

Analisis saiz berkas JavaScript anda untuk mengenal pasti kawasan yang boleh anda perbaiki.

• Gunakanwebpack-bundle-analyzeruntuk memvisualisasikan himpunan anda dan melihat perpustakaan mana yang menggunakan paling banyak ruang.

npm install --save-dev webpack-bundle-analyzer

Dalam konfigurasi Webpack anda:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { plugins: [ new BundleAnalyzerPlugin() ] };

9.Kurangkan CSS Tidak Digunakan

• Gunakan alatan sepertiPurgeCSSuntuk mengalih keluar CSS yang tidak digunakan daripada himpunan anda. Anda boleh menyepadukannya dengan konfigurasi Webpack atau PostCSS anda.

npm install @fullhuman/postcss-purgecss

Contoh konfigurasi PostCSS:

const purgecss = require('@fullhuman/postcss-purgecss')({ content: ['./src/**/*.js', './public/index.html'], defaultExtractor: content => content.match(/[\w-/:]+(? 
 10. Optimumkan Permintaan Rangkaian 
 
Mengurangkan bilangan permintaan rangkaian dan mengoptimumkan panggilan API boleh membawa kepada peningkatan prestasi yang ketara.

• Debouncing API Calls: Use debouncing to limit how often API requests are sent during user input.

const fetchResults = debounce((query) => { // API call logic }, 300);

• Caching API Data: Use libraries likeSWRorReact Queryto cache API requests and avoid refetching data unnecessarily.

import useSWR from 'swr'; const fetcher = url => fetch(url).then(res => res.json()); const MyComponent = () => { const { data, error } = useSWR('/api/data', fetcher); if (error) return 
Error loading data
; if (!data) return 
Loading...
; return 
{data.message}
; };

11.Use React Fragments

Avoid adding unnecessary elements to the DOM by usingReact Fragments( and >) when wrapping multiple elements.

const MyComponent = () => ( 
Title
 
Content
 > );

12.Profiling and Performance Testing

Use theReact Developer Toolsprofiler to identify performance bottlenecks in your app.

• React Profiler: In Chrome or Firefox, open the React DevTools and switch to the "Profiler" tab. Record a session and analyze where components are re-rendering and consuming more time.

Conclusion

Optimizing a React application requires careful attention to performance, bundle size, and rendering efficiency. By employing techniques like code splitting, memoization, lazy loading, tree shaking, and minimizing network requests, you can significantly improve the performance of your app. Make sure to regularly analyze and test your app’s performance to catch any potential inefficiencies.

Atas ialah kandungan terperinci Aplikasi Optimalkan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!