Mengoptimumkan Aplikasi Reaksi: Teknik Mudah untuk Prestasi Lebih Baik

React ialah alat yang popular untuk membina antara muka pengguna, tetapi apabila apl semakin besar, ia boleh menjadi perlahan. Dalam artikel ini, saya akan melalui teknik berbeza yang boleh anda gunakan untuk mengoptimumkan apl React anda.

1. Elakkan Paparan Semula yang Tidak Perlu dengan React.memo

Jika anda mempunyai komponen yang tidak perlu dikemas kini sepanjang masa, bungkusnya dengan React.memo. Ini membantu React mengingati output terakhir dan langkau pemaparan semula jika tiada apa yang berubah.

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. Cegah Kerja Tambahan dengan PureComponent

Jika anda menggunakan komponen kelas, lanjutkan React.PureComponent dan bukannya React.Component. Ini memberitahu React untuk hanya memaparkan semula jika prop atau keadaan benar-benar berubah.

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}

3. Gunakan useCallback dan useMemo untuk Simpan Kerja

Kait tindak balas gunaPanggil balik dan useMemo membantu anda menjimatkan kerja dengan mengingati fungsi dan nilai. Ini mengelakkan penciptaan yang baharu setiap kali komponen dipaparkan.

• useCallback: Mengingat fungsi.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• useMemo: Mengingat nilai.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4. Muat Kod Atas Permintaan dengan React.lazy dan Suspense

Muat bahagian kod anda hanya apabila diperlukan menggunakan React.lazy dan Suspense. Ini menjadikan pemuatan awal anda lebih cepat.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

5. Pisah Kod Mengikut Laluan

Muat hanya kod yang anda perlukan untuk setiap halaman dengan membahagikan kod anda mengikut laluan. Ini mempercepatkan masa pemuatan awal.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}

6. Lazy Load Imej dan Komponen

Tunda memuatkan imej dan komponen sehingga ia diperlukan. Ini meningkatkan masa dan prestasi pemuatan awal.

• Malas Muatkan Imej: Gunakan atribut pemuatan dalam teg img untuk menangguhkan imej luar skrin.

<img src="image.jpg" alt="Mengoptimumkan Aplikasi Reaksi: Teknik Mudah untuk Prestasi Lebih Baik" loading="lazy">

• Komponen Muatan Malas: Gunakan React.lazy dan Suspense untuk komponen.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

7. Elakkan Fungsi Sebaris dalam JSX

Fungsi sebaris dalam JSX boleh melambatkan keadaan kerana ia mencipta kejadian baharu setiap kali. Tentukan mereka di luar kaedah pemaparan atau gunakan useCallback.

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>

8. Optimumkan Senarai Besar dengan Virtualisasi React

Apabila berurusan dengan senarai besar, gunakan pustaka seperti tetingkap tindak balas atau maya bertindak balas untuk hanya memaparkan perkara yang kelihatan pada skrin, mengurangkan beban.

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>
);

9. Peristiwa Pendikit dan Nyahlantun

Fungsi pendikit atau nyahpantulkan kerap untuk mengawal kekerapan ia berjalan. Ini amat berguna untuk acara seperti menatal atau menaip.

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);

10. Gunakan Kekunci Unik untuk Senarai

Pastikan setiap item senarai mempunyai prop kunci yang unik. Ini membantu React menjejaki item dan mengemas kininya dengan cekap.

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));

11. Gunakan Binaan Pengeluaran

Sentiasa gunakan binaan pengeluaran untuk apl React anda untuk mendapat manfaat daripada pengoptimuman seperti pengurangan dan penghapusan kod mati.

# Create a production build
npm run build

Dengan menggunakan teknik ini, anda boleh menjadikan aplikasi React anda lebih pantas dan cekap, memberikan pengalaman yang lebih baik untuk pengguna anda. Pengoptimuman ialah proses yang berterusan, jadi teruskan membuat profil dan perbaiki apl anda dengan kerap.

Selamat mengekod.

Atas ialah kandungan terperinci Mengoptimumkan Aplikasi Reaksi: Teknik Mudah untuk Prestasi Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!