Helah Penting React Setiap Pembangun Mesti Tahu

React sangat hebat, tetapi menguasainya bermakna melampaui asas dan mempelajari beberapa helah yang kurang dikenali untuk menyelaraskan pembangunan. Berikut ialah senarai helah 20 React kegemaran peribadi saya yang boleh meningkatkan produktiviti anda dan membantu anda menulis kod yang lebih bersih dan berkesan. Mari selami terus contoh!

---

1. Penilaian Litar Pintas untuk Paparan Bersyarat

Elakkan kata-kata jika pernyataan untuk pemaparan bersyarat dengan penilaian litar pintas.

{isLoading && <Spinner />}

Ini menjadikan hanya apabila isLoading adalah benar, memastikan JSX anda bersih.

---

2. Nama Kelas Dinamik dengan nama kelas Perpustakaan

Pustaka nama kelas memudahkan untuk menggunakan kelas secara bersyarat.

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. Menghafal Pengiraan Mahal dengan menggunakanMemo

Jika pengiraan itu mahal, hafalkannya supaya React tidak membuat pengiraan semula secara tidak perlu.

const sortedData = useMemo(() => data.sort(), [data]);

Ini mengira semula sortedData hanya apabila data berubah.

---

4. Menyahlantunkan Input dengan useEffect

Elakkan pemaparan semula yang berterusan dengan menyahlantunkan perubahan input.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

5. Cangkuk Tersuai untuk Logik Boleh Digunakan Semula

Encapsulate logik dalam cangkuk tersuai untuk menggunakannya semula merentas komponen.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. Komponen Pemuatan Malas dengan React.lazy

Optimumkan masa pemuatan dengan membelah komponen anda.

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

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

---

7. Mengakses Props atau Negeri Sebelumnya dengan useRef

Untuk mengakses nilai keadaan sebelumnya, gunakan useRef.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. Elakkan pemaparan semula dengan Melepasi Fungsi untuk digunakanPanggil balik

Jika fungsi tidak perlu ditukar, hafalkannya dengan useCallback.

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. Memusnahkan Alat untuk Kod Lebih Bersih

Memusnahkan prop tepat dalam parameter fungsi.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. React.Fragment untuk Mengumpulkan Elemen Tanpa Div Tambahan

Balut elemen tanpa menambah nod DOM tambahan.

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. Sempadan Ralat untuk Menangkap Ralat JavaScript

Tangkap ralat dalam komponen kanak-kanak untuk menghalang keseluruhan apl daripada ranap.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroop2001 (Jagroop) · GitHub

? Pembangun Tindanan Penuh | ? Pembangun Pembelajaran Mesin | ? Dev Relations Pro – ? Tersedia untuk Disewa - Jagroop2001

github.com

12. Menggunakan PropTypes untuk Pengesahan Prop

Tangkap pepijat lebih awal dengan menentukan jenis prop.

{isLoading && <Spinner />}

---

13. Pengurang Negeri dengan useReducer

Untuk logik keadaan kompleks, useReducer boleh menjadi lebih cekap.

npm install classnames

---

14. useLayoutEffect untuk Manipulasi DOM

Jalankan kesan selepas kemas kini DOM tetapi sebelum cat.

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. Encapsulate State Logic dengan Konteks dan useContext

Buat keadaan global tanpa penggerudian prop.

const sortedData = useMemo(() => data.sort(), [data]);

---

16. Elakkan Definisi Fungsi Sebaris dalam JSX

Mentakrifkan fungsi sebaris menyebabkan pemaparan semula. Sebaliknya, tentukan mereka di luar.

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

17. Gunakan Rantaian Pilihan dalam JSX untuk Akses Harta Yang Selamat

Kendalikan nilai nol atau tidak ditentukan dengan baik.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. Gunakan Prop utama untuk Mengelakkan Isu Penyampaian Semula

Sentiasa gunakan kekunci unik semasa memaparkan senarai.

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

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

---

19. Komponen Eksport dengan Eksport Dinamakan untuk Kawalan Import yang Lebih Baik

Eksport bernama memudahkan pengimportan komponen tertentu.

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

Kemudian import mengikut keperluan:

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. Corak Komponen Boleh Digunakan Semula: Komponen Pesanan Tinggi (HOC)

Balut komponen dengan HOC untuk menambah logik tambahan.

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

Menguasai helah ini akan membantu anda menulis kod React yang lebih ringkas, mudah dibaca dan cekap! Selamat mengekod!

Atas ialah kandungan terperinci Helah Penting React Setiap Pembangun Mesti Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!