Petua untuk menjadikan apl React anda lebih pantas!

Hello semua, dalam catatan blog ini, saya akan berkongsi beberapa petua untuk menjadikan aplikasi React anda lebih pantas daripada yang anda fikirkan! Dengan mengikuti amalan terbaik ini, anda boleh meningkatkan prestasi aplikasi React anda dengan ketara sambil memastikan kebolehskalaan dan kebolehselenggaraannya. Mari beralih terus ke beberapa pendekatan hebat dalam aplikasi perusahaan:

Penggunaan hebat React.memo

Gunakan React.memo untuk membalut komponen berfungsi untuk mengelakkan pemaparan semula yang tidak perlu apabila prop kekal tidak berubah.

import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Rendered Child');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount((p) => p + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
};

Urus status dengan betul✅

Kenaikan pangkat: Hanya letakkan keadaan di mana perlu untuk mengelakkan keadaan berlebihan dalam komponen bersarang dalam.

const Child = ({ onIncrement }) => (
  <button onClick={onIncrement}>Increment</button>
);

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount((p) => p + 1);

  return (
    <div>
      <h1 id="Count-count">Count: {count}</h1>
      <Child onIncrement={increment} />
    </div>
  );
};

Suspense dan React.malas, kuasa pemisahan kod

Import komponen secara dinamik dan muatkannya hanya apabila diperlukan, mengurangkan saiz pakej awal.

import React, { Suspense } from 'react';
import Loader from './Loader';

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

const App = () => (
  <Suspense fallback={<Loader />}>
    <ProductsList />
  </Suspense>
);

Kepentingan Key!

Membantu React mengenali perubahan dengan menjadikan semua elemen tatasusunan yang diberikan unik.

const ProductsList = ({ products }) => (
  <ul>
    {products.map((p) => (
      <li key={p.id}> - {p.name}</li>
    ))}
  </ul>
);

Virtualisasi ialah penolong baik anda

Gunakan virtualisasi apabila memberikan sejumlah besar data.

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

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const Row = ({ index, style }) => (
  <div style={style}>
    <p>{items[index]}</p>
  </div>
);

const MyList = () => (
  <List height={300} width={300} itemSize={35} itemCount={items.length}>
    {Row}
  </List>
);

Menggunakan kaedah di atas, apl React anda akan menjadi sangat pantas, membolehkan anda menonjol dan merebut lebih banyak peluang. Terima kasih kerana membaca. Jika artikel ini membantu anda, sila like!

Atas ialah kandungan terperinci Petua untuk menjadikan apl React anda lebih pantas!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!