[Terjemahan] Refactoring React komponen menggunakan cangkuk tersuai

Saya sering mendengar orang bercakap tentang komponen fungsi React, menyebut bahawa komponen fungsi sudah pasti akan menjadi lebih besar dan mempunyai logik yang lebih kompleks. Lagipun, kami menulis komponen dalam "fungsi", jadi anda perlu menerima bahawa komponen akan berkembang dan fungsi akan terus berkembang. Ia juga disebut dalam komponen React:

Memandangkan komponen fungsi boleh melakukan lebih banyak perkara, komponen fungsi dalam pangkalan kod anda secara keseluruhan akan menjadi lebih panjang dan lebih panjang. [Cadangan berkaitan: Tutorial video Redis, Video pengaturcaraan]

Ia juga menyebut bahawa kita harus:

Cuba untuk elakkan Menambah abstraksi lebih awal

Jika anda menggunakan CodeScene, anda mungkin perasan bahawa ia memberi amaran kepada anda apabila fungsi anda terlalu panjang atau kompleks. Jika kami mengikuti apa yang kami katakan sebelum ini, kami mungkin mempertimbangkan sama ada kami harus mengkonfigurasi amaran berkaitan CodeScene secara lebih meluas. Sudah tentu ini boleh dilakukan, tetapi saya fikir kita tidak sepatutnya melakukan ini, dan kita tidak seharusnya menolak untuk menambah banyak abstraksi pada kod Kita boleh mendapat banyak faedah daripadanya, dan kebanyakan masa kosnya tidak tinggi. Kami boleh terus mengekalkan kesihatan kod kami dengan sangat baik!

Kerumitan Pengendalian

Kita harus sedar bahawa walaupun komponen fungsi ditulis dalam "fungsi", fungsi ini masih boleh seperti fungsi lain, Boleh terdiri daripada banyak fungsi lain. Seperti useState, useEffect atau cangkuk lain, subkomponen itu sendiri juga berfungsi. Oleh itu, kita secara semula jadi boleh menggunakan idea yang sama untuk menangani kerumitan komponen fungsi: dengan mencipta fungsi baharu untuk merangkum kod kompleks yang mematuhi corak biasa .

Cara biasa untuk menangani komponen yang kompleks adalah dengan memecahkannya kepada beberapa sub-komponen. Tetapi berbuat demikian mungkin berasa tidak wajar atau menyukarkan untuk menerangkan subkomponen ini dengan tepat. Pada masa ini, kita boleh menemui titik abstrak baharu dengan menyusun logik fungsi cangkuk komponen.

Setiap kali kita melihat senarai panjang useState , useEffect atau fungsi cangkuk terbina dalam lain dalam komponen, kita harus mempertimbangkan sama ada kita boleh mengeluarkannya ke dalam cangkuk tersuai. Fungsi cangkuk tersuai ialah fungsi yang boleh menggunakan fungsi cangkuk lain di dalamnya, dan mencipta fungsi cangkuk tersuai juga mudah.

Komponen yang ditunjukkan di bawah adalah bersamaan dengan papan pemuka, menggunakan senarai untuk memaparkan data gudang pengguna (bayangkan serupa dengan github). Komponen ini bukan komponen yang kompleks, tetapi ia adalah contoh yang baik tentang cara menggunakan cangkuk tersuai.

function Dashboard() {
  const [repos, setRepos] = useState<Repo[]>([]);
  const [isLoadingRepos, setIsLoadingRepos] = useState(true);
  const [repoError, setRepoError] = useState<string | null>(null);

  useEffect(() => {
    fetchRepos()
      .then((p) => setRepos(p))
      .catch((err) => setRepoError(err))
      .finally(() => setIsLoadingRepos(false));
  }, []);

  return (
    <div className="flex gap-2 mb-8">
      {isLoadingRepos && <Spinner />}
      {repoError && <span>{repoError}</span>}
      {repos.map((r) => (
        <RepoCard key={i.name} item={r} />
      ))}
    </div>
  );
}

Kami akan mengekstrak logik cangkuk ke dalam cangkuk tersuai, kami hanya perlu menyalin kod ini ke dalam fungsi yang bermula dengan use (di sini kami akan menamakannya useRepos ):

/**
 * 请求所有仓库用户列表的hook函数
 */
export function useRepos() {
  const [repos, setRepos] = useState<Repo[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchRepos()
      .then((p) => setRepos(p))
      .catch((err) => setError(err))
      .finally(() => setIsLoading(false));
  }, []);

  return [repos, isLoading, error] as const;
}

mesti bermula dengan use kerana pemalam linter boleh mengesan bahawa apa yang anda sedang buat ialah fungsi cangkuk dan bukannya fungsi biasa, jadi pemalam boleh menyemak sama ada cangkuk anda fungsi mematuhi Peraturan yang berkaitan untuk cangkuk tersuai yang betul.

Berbanding sebelum penapisan, satu-satunya perkara baharu yang muncul selepas penapisan ialah penyataan pulangan dan as const. Pembayang jenis di sini hanyalah untuk memastikan inferens jenis adalah betul: tatasusunan yang mengandungi 3 elemen, jenisnya ialah Repo[], boolean, string | null. Sudah tentu, anda boleh mengembalikan apa sahaja yang anda inginkan daripada fungsi cangkuk.

Nota Penterjemah: Tambah as const di sini Perbezaan dalam inferens jenis ts ditunjukkan terutamanya dalam bilangan elemen angka. Tanpa menambah as const, jenis yang disimpulkan ialah (string | boolean | Repo[] | null)[] dan selepas menambahnya, jenis yang disimpulkan ialah readonly [Repo[], boolean, string | null].

Gunakan cangkuk tersuai useRepos pada komponen kami, dan kod itu menjadi:

function Dashboard() {
  const [repos, isLoadingRepos, repoError] = useRepos();

  return (
    <div className="flex gap-2 mb-8">
      {isLoadingRepos && <Spinner />}
      {repoError && <span>{repoError}</span>}
      {repos.map((i) => (
        <RepoCard key={i.name} item={i} />
      ))}
    </div>
  );
}

Seperti yang anda lihat, kami tidak boleh memanggil sebarang Fungsi setter, iaitu , ia tidak boleh mengubah keadaan. Dalam komponen ini, kita tidak perlu lagi memasukkan logik untuk mengubah suai keadaan Logik ini semuanya disertakan dalam fungsi cangkuk useRepos. Sudah tentu jika anda benar-benar memerlukannya, anda boleh mendedahkannya dalam penyataan pulangan fungsi cangkuk.

Apakah faedah melakukan ini? Dokumentasi React menyebut:

Dengan mengekstrak fungsi cangkuk tersuai, logik komponen boleh digunakan semula

Kita boleh bayangkan jika komponen lain dalam aplikasi ini juga perlu memaparkan senarai pengguna di gudang, maka semua komponen ini perlu lakukan ialah mengimport fungsi cangkuk useRepos. Jika cangkuk dikemas kini, mungkin menggunakan beberapa bentuk caching, atau dikemas kini secara berterusan melalui tinjauan pendapat atau pendekatan yang lebih kompleks, maka semua komponen yang merujuk cangkuk ini akan mendapat manfaat.

Sudah tentu, selain memudahkan penggunaan semula, mengekstrak cangkuk tersuai juga mempunyai faedah lain. Dalam contoh kami, semua useState dan useEffect adalah untuk mencapai fungsi yang sama - untuk mendapatkan senarai pengguna perpustakaan Kami menganggap ini sebagai fungsi atom, jadi dalam komponen, terdapat banyak fungsi Atom sedemikian juga sangat biasa. Jika kami mengekstrak kod fungsi atom ini ke dalam fungsi cangkuk tersuai yang berbeza, adalah lebih mudah untuk mencari keadaan yang perlu dikemas kini secara serentak apabila kami mengubah suai logik kod, menjadikannya kurang berkemungkinan terlepas. Selain itu, faedah melakukan ini termasuk:

• Fungsi yang lebih pendek lebih mudah difahami
• Keupayaan untuk menamakan fungsi atom (seperti useRepo)
• Sediakan dokumentasi lebih semula jadi (fungsi setiap fungsi cangkuk tersuai adalah lebih padu dan tunggal, dan fungsi seperti ini juga mudah untuk menulis komen)

Akhir sekali

Kami telah Belajar cangkuk React itu fungsi tidak begitu misteri dan boleh dicipta sama seperti fungsi lain. Kami boleh membuat cangkuk khusus domain kami sendiri dan menggunakannya semula sepanjang aplikasi. Anda juga boleh menemui banyak cangkuk tujuan am pratulis pada pelbagai blog atau "perpustakaan cangkuk". Cangkuk ini boleh digunakan dengan mudah dalam projek kami seperti useState dan useEffect. Cangkuk useInterval Dan Abramov ialah contoh, contohnya anda mempunyai cangkuk yang serupa dengan useRepos tetapi anda perlu boleh membuat tinjauan pendapat untuk mendapatkan kemas kini? Kemudian anda boleh cuba menggunakan useInterval dalam cangkuk anda.

Alamat asal bahasa Inggeris: https://codescene.com/engineering-blog/refactoring-components-in-react-with-custom-hooks

[Pembelajaran yang disyorkan :tutorial video javascript】

Atas ialah kandungan terperinci [Terjemahan] Refactoring React komponen menggunakan cangkuk tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!