Teknik Pengoptimuman Prestasi React: Memoisasi, Lazy Loading dan Banyak Lagi

Apabila membina aplikasi web moden, prestasi adalah penting. Pengguna mengharapkan apl yang pantas, responsif, malah kelewatan sedikit boleh menyebabkan kekecewaan. Bertindak balas, walaupun berkuasa, kadangkala boleh mengalami kesesakan prestasi, terutamanya apabila aplikasi berkembang dalam saiz dan kerumitan. Nasib baik, terdapat beberapa teknik untuk mengoptimumkan prestasi, termasuk penghafalan, pemuatan malas dan banyak lagi.

Dalam panduan ini, kami akan memecahkan beberapa cara paling berkesan untuk mengoptimumkan prestasi dalam aplikasi React anda. Kami akan merangkumi asas penghafalan, pemuatan malas dan alatan seperti React Profiler untuk membantu anda mengenal pasti dan membetulkan kesesakan. Mari mulakan!

Pengenalan: Mengapa Prestasi Penting dalam Apl Reaksi Moden

Fikirkan apl web anda sebagai kereta—tidak kira betapa anggunnya ia di luar, jika ia tidak berfungsi dengan baik, pengalaman pengguna akan terjejas. Dalam apl React, "prestasi" ini merujuk kepada seberapa cepat komponen anda dipaparkan dan betapa cekapnya ia mengemas kini apabila data atau keadaan berubah.

Apabila apl React anda berskala, pemaparan semula komponen secara tidak perlu atau memuatkan berkas berat sekali gus boleh membawa kepada prestasi yang lebih perlahan. Itulah sebabnya mempelajari teknik Pengoptimuman prestasi bertindak balas adalah penting untuk membina aplikasi yang lancar dan berprestasi tinggi.

Memoisasi dalam React

Cara Menggunakan React.memo dan useMemo Dengan Berkesan

Menghafal ialah perkataan mewah yang bermaksud mencache hasil panggilan fungsi supaya anda tidak perlu mengira semula setiap kali. Dalam React, penghafalan membantu menghalang pemaparan semula yang tidak perlu dengan mengingati hasil pemaparan sebelumnya dan menggunakan hasil cache itu jika tiada apa yang berubah.

React.memo

Mari mulakan dengan React.memo. Komponen tertib lebih tinggi ini menghalang komponen daripada dipaparkan semula jika propnya tidak berubah.

Contoh:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

Dalam contoh ini, MyComponent hanya memaparkan semula jika nama prop berubah. Jika anda melepasi nilai nama yang sama, React akan melangkau pemaparan, meningkatkan prestasi.

gunakanMemo

Seterusnya, terdapat useMemo. Cangkuk ini digunakan untuk menghafal pengiraan atau nilai yang mahal di dalam komponen berfungsi anda.

Contoh:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

Di sini, pengiraan hanya berjalan semula apabila tatasusunan item berubah, menjimatkan masa dengan mengelakkan pengiraan semula hasil yang sama pada setiap paparan.

Komponen Pemuatan Malas

Meningkatkan Masa Muatan dengan React.lazy

Pemuatan malas ialah teknik di mana komponen dimuatkan hanya apabila ia diperlukan, dan bukannya memuatkan semuanya terlebih dahulu. Ini membantu mengurangkan masa muat awal aplikasi anda, menjadikannya lebih pantas.

React menyediakan fungsi terbina dalam yang dipanggil React.lazy() yang membolehkan anda memuatkan komponen atas permintaan.

Contoh:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

Dalam contoh ini, MyComponent hanya akan dimuatkan apabila ia benar-benar diperlukan. Komponen Suspense menyediakan UI sandaran (seperti pemutar pemuatan) semasa komponen sedang diambil, menjadikan pengalaman pengguna lebih lancar.

React Profiler untuk Pemantauan Prestasi

Cara Mengenalpasti Bottleneck

Sukar untuk mengoptimumkan sesuatu yang anda tidak boleh ukur. Di situlah React Profiler masuk. React Profiler membolehkan anda menjejak prestasi komponen anda, mengenal pasti pemaparan perlahan dan mengukur "kos" pemaparan semula.

Untuk menggunakan React Profiler, hanya bungkus pokok komponen dengan dan menyediakan fungsi panggil balik untuk mengumpul data prestasi.

Contoh:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total + item.value, 0);
  }, [items]);

  return <div>Total Value: {expensiveCalculation}</div>;
}

Menggunakan Profiler, anda boleh menjejaki tempoh masa yang diambil oleh setiap komponen untuk dipaparkan dan mencari kawasan yang prestasi boleh dipertingkatkan, seperti pemaparan semula yang tidak perlu.

Strategi Pengoptimuman Lain

Pemisahan Kod, Pengoptimuman Pengendalian Acara dan Banyak Lagi

Selain menghafal dan memuatkan malas, terdapat beberapa teknik lain untuk meningkatkan prestasi apl React anda:

1. Pemisahan Kod: Pecahkan apl anda kepada bahagian yang lebih kecil yang boleh dimuatkan atas permintaan menggunakan ciri pemisahan kod Webpack. Ini mengurangkan saiz berkas awal.

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

1. Pengoptimuman Pengendalian Acara: Gunakan cangkuk useCallback untuk menghafal pengendali acara, menghalang mereka daripada dicipta semula pada setiap paparan.

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

1. Menyahlantun dan Mendikit: Optimumkan pendengar acara seperti menatal atau mengubah saiz dengan menyahlantun atau mendikitnya untuk mengehadkan kekerapan kemas kini.

   const OtherComponent = lazy(() => import('./OtherComponent'));

Kesimpulan: Membina Aplikasi Reaksi Berprestasi Tinggi dengan Teknik Ini

Membina aplikasi React yang pantas dan cekap memerlukan gabungan teknik. Dengan menggunakan memoisasi dengan React.memo dan useMemo, anda boleh menghalang pemaparan semula yang tidak perlu. Lazy loading komponen dengan React.lazy membolehkan anda memperbaik masa muat dengan hanya mengambil komponen apabila ia diperlukan. React Profiler membantu anda mengenal pasti kesesakan prestasi dan mengoptimumkannya.

Digabungkan dengan strategi seperti pemisahan kod dan pengoptimuman acara, anda boleh memastikan apl React anda menyampaikan pengalaman pengguna yang lancar dan responsif, walaupun ia berkembang dalam saiz dan kerumitan.

---

Bersedia untuk meningkatkan prestasi apl React anda ke tahap seterusnya? Cuba teknik pengoptimuman ini dalam projek anda dan lihat kelajuan apl anda bertambah baik!

---

Jika anda menyukai artikel ini, pertimbangkan untuk menyokong kerja saya:

• Beli saya kopi
• Tempah panggilan untuk bimbingan atau nasihat kerjaya
• Ikuti saya di Twitter
• Sambung di LinkedIn

Atas ialah kandungan terperinci Teknik Pengoptimuman Prestasi React: Memoisasi, Lazy Loading dan Banyak Lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!