Aplikasi Optimalkan React

Untuk mengoptimumkan aplikasi React, 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 (
      <react.suspense fallback="{<div">Loading...}>
        <lazycomponent></lazycomponent>
      </react.suspense>
    );
  }

• React-loadable: Sebagai alternatif, anda boleh menggunakan pustaka seperti react-loadable untuk 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 <div>{value}</div>;
  });

• 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-window atau react-virtualized: Pustaka ini membolehkan anda menghasilkan set data besar dengan cekap dengan memayakan senarai.

  import { FixedSizeList as List } from 'react-window';

  const MyList = ({ items }) => (
    <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
      {({ index, style }) => <div style="{style}">{items[index]}</div>}
    </list>
  );

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 pustaka react-lazyload untuk memuatkan imej malas yang mudah.

  import LazyLoad from 'react-lazyload';

  const ImageComponent = () => (
    <lazyload height="{200}" once>
      <img src="image-url.jpg" alt="Aplikasi Optimalkan React">
    </lazyload>
  );

• Pemerhati Persimpangan: Anda juga boleh menggunakan API Pemerhati Persimpangan untuk 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 <img ref="{imgRef}" src="%7BinView" : alt="{alt}">;
  };

7. Kecilkan JavaScript

• Gunakan Terser atau minifikasi terbina dalam Webpack untuk mengurangkan saiz berkas JavaScript anda semasa proses binaan.

• Buat Apl React secara 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.

• Gunakan webpack-bundle-analyzer untuk 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 seperti PurgeCSS untuk 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-/:]+(?



<h3>
  
  
  10. <strong>Optimumkan Permintaan Rangkaian</strong>
</h3>

<p>Mengurangkan bilangan permintaan rangkaian dan mengoptimumkan panggilan API boleh membawa kepada peningkatan prestasi yang ketara.</p>

• 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 like SWR or React Query to 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 <div>Error loading data</div>;
    if (!data) return <div>Loading...</div>;
    return <div>{data.message}</div>;
  };

11. Use React Fragments

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

const MyComponent = () => (
  
    <h1>Title</h1>
    <p>Content</p>
  >
);

12. Profiling and Performance Testing

Use the React Developer Tools profiler 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!