Corak Prestasi EACT Setiap pemaju harus mencuri (dan bagaimana melaksanakannya)

Meningkatkan prestasi aplikasi React adalah penting untuk pengalaman pengguna yang positif. Artikel ini menggariskan tujuh corak prestasi terbukti yang dikumpulkan dari mengoptimumkan banyak aplikasi reaksi pengeluaran.

---

1. memoisasi dengan dan useMemo: useCallback

Masalah: REDERS yang tidak perlu kerana props atau keadaan yang tidak berubah.

Penyelesaian: Cache Operasi dan Rujukan Fungsi Komputasi mahal.

<code class="language-javascript">const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return <ChildComponent onClick={handleClick} />;
};</code>

Amalan terbaik: Gunakan dengan untuk komponen kanak -kanak untuk mengelakkan kemas kini subtree yang tidak perlu. Sesuai untuk pengiraan kompleks (penyortiran, penapisan), panggilan balik yang disampaikan kepada kanak -kanak yang dioptimumkan, dan nilai pembekal konteks yang stabil. React.memo

---

2. pemuatan malas dan pemisahan kod:

Masalah: saiz bundle awal yang besar yang memberi kesan kepada cat kandungan pertama (FCP).

Penyelesaian: import dinamik dan untuk pemuatan atas permintaan. Suspense

<code class="language-javascript">const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  <React.Suspense fallback={<Spinner />}>
    {showCharts && <HeavyChartLibrary />}
  </React.Suspense>
);</code>

Advanced: Bersepadu dengan Router React untuk pemisahan kod berasaskan laluan.

---

3. senarai virtualisasi untuk dataset besar:

Masalah: Memberi ribuan item mengatasi dom.

Penyelesaian: hanya membuat item yang kelihatan. react-window

Bonus

<code class="language-javascript">import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  <FixedSizeList height={600} itemCount={items.length} itemSize={35} width="100%">
    {({ index, style }) => (
      <div style={style}>...</div>
    )}
  </FixedSizeList>
);</code>

: Gunakan untuk ketinggian baris dinamik dan VariableSizeList untuk bekas responsif. react-virtualized-auto-sizer

---

4. Pengurusan Negeri yang cekap:

Masalah: Kemas kini negeri berganda menyebabkan cascading re-render.

Penyelesaian: Leverage React 18's Automatic Batching.

React 18:

<code class="language-javascript">setCount(1);
setText('Updated'); // Single re-render</code>

pra-bertindak balas 18 atau untuk senario kompleks: Gunakan untuk kemas kini keadaan atom. useReducer

---

5. Debouncing API Panggilan:

Masalah: Permintaan API yang berlebihan dari input pengguna cepat (mis., Bar carian).

Penyelesaian: Custom cangkuk. useDebounce

<code class="language-javascript">import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};</code>

tip pro: Gabungkan dengan untuk membatalkan permintaan yang belum selesai. AbortController

---

API konteks yang dioptimumkan:

Masalah:

Pengguna konteks yang tidak perlu kerana perubahan yang tidak berkaitan.

Penyelesaian:

Konteks berpecah dan memoize nilai penyedia.

---

Kemas kini UI optimis:

Masalah:

perlahan ui kerana menunggu respons API.

Penyelesaian: Sediakan maklum balas visual segera dan pengembalian semula pada ralat.

---

Senarai Semak Prestasi:

1. profil re-render dengan React Devtools Profiler.
2. menganalisis saiz bundle dengan sumber-peta-explorer.
3. ujian dengan tab Prestasi Chrome (CPU Throttling).
4. Gunakan React.memo, useMemo, useCallback secara strategik.
5. Melaksanakan pemuatan tambahan.
6. Mengoptimumkan imej/media dengan pemuatan malas.
7. Pertimbangkan rendering sisi pelayan untuk kandungan kritikal.

Ingat: Profil Pertama, Optimalkan kedua! Teknik -teknik ini boleh digunakan di pelbagai rangka React (Next.js, Gatsby, dan lain -lain).

Atas ialah kandungan terperinci Corak Prestasi EACT Setiap pemaju harus mencuri (dan bagaimana melaksanakannya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!