Menjinakkan Binatang: Bagaimana Saya Memfaktorkan Semula Komponen Tindak Balas yang Messy

Kami semua pernah ke sana. Anda membuka komponen React yang anda tulis beberapa bulan lalu, dan rasanya anda sedang melihat kod yang ditulis oleh seseorang yang tergesa-gesa — kerana anda mungkin begitu. Tarikh akhir semakin hampir, dan ciri perlu dihantar. Cepat ke hari ini, dan tiba masanya untuk memfaktorkan semula komponen yang tidak kemas itu.

Jadi, inilah cara saya mengatasinya.

Seram Awal

Perkara pertama yang saya perhatikan ialah komponen itu telah membesar terlalu besar. Ia cuba melakukan segala-galanya seperti mengendalikan keadaan, membuat panggilan API, mengurus logik UI yang kompleks, dan juga menggunakan gaya secara langsung. Ia adalah satu fail dengan lebih 540 baris dan membacanya terasa seperti tertanya-tanya di dalam hutan tanpa peta.

Langkah pertama ialah menerima realiti: Kod ini tidak lagi boleh diselenggara. Jika saya, orang yang menulisnya, hampir tidak dapat mengikuti apa yang berlaku, orang lain tidak akan berpeluang. Jadi, saya memutuskan untuk memecahkannya.

Memecahkannya

Saya bermula dengan mengenal pasti pelbagai tanggungjawab komponen. Terdapat tiga kawasan yang jelas:

1. Pengurusan Negeri: Mengendalikan keadaan komponen telah dikaitkan dengan logik UI.

2. Panggilan API: Mengambil data dan mengendalikan keadaan pemuatan.

3. UI Rendering: Memaparkan data dalam struktur UI yang agak kompleks.
   Setiap tanggungjawab ini perlu diasingkan.

Mengeluarkan Cangkuk untuk Logik Negeri dan API

Perkara pertama yang saya lakukan ialah mengekstrak pengurusan negeri dan logik API ke dalam cangkuk tersuai. Ini bukan sahaja membersihkan komponen tetapi juga memudahkan untuk menguji dan menggunakan semula logik di tempat lain.

Menyebut beberapa kod di sini (bukan yang asal):

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

Dengan useDataFetching, saya mengeluarkan logik panggilan API dan mengendalikan keadaan pemuatan dan ralat. Kini, komponen hanya perlu memanggil cangkuk ini dan mendapatkan data yang diperlukan, bersih dan mudah.

Memudahkan Logik UI
Seterusnya, saya melihat logik rendering. Sebelum ini, saya sedang menyemak pemuatan, ralat dan data semuanya dalam fungsi pemaparan, yang menjadikannya agak sukar untuk diikuti. Saya memisahkan logik ini kepada fungsi kecil serba lengkap seperti ini (sudah tentu bukan yang asal ;)

function renderLoading() {
  return <p>Loading...</p>;
}

function renderError(error) {
  return <p>Error: {error.message}</p>;
}

function renderData(data) {
  return <div>{/* Complex UI logic here */}</div>;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

Ceramah Akhir

Selepas memecahkan komponen, fail itu bertukar daripada lebih 540 baris kepada hanya kira-kira 124, dengan logik yang lebih mudah untuk diikuti. Komponen kini melakukan satu perkara: memberikan UI. Segala-galanya telah dimuatkan ke cangkuk tersuai dan fungsi utiliti.

Pengalaman ini mengukuhkan beberapa pengajaran penting untuk saya:

• Jangan Takut Pemfaktoran Semula: Mudah untuk meninggalkan kod yang tidak kemas seperti sedia ada, terutamanya apabila ia berfungsi. Tetapi meluangkan masa untuk membersihkannya menjadikan hidup anda — dan kehidupan masa depan anda — lebih mudah.

• Pemisahan Kebimbangan: Menyimpan kebimbangan yang berbeza di tempat yang berbeza (negeri, API, UI) menjadikan kod lebih modular, boleh digunakan semula dan boleh diuji.

• Kekalkan Mudah: Mempermudahkan fungsi pemaparan dengan memunggah logik kepada fungsi yang lebih kecil menjadikan komponen lebih mudah dibaca.

Jadi, jika anda mempunyai komponen yang tidak kemas seperti anda, jangan teragak-agak untuk memfaktorkan semula. Ini bukan sahaja tentang kod bersih — ini tentang menjadikan hidup anda lebih mudah sebagai pembangun. Dan siapa yang tidak mahu itu?

Atas ialah kandungan terperinci Menjinakkan Binatang: Bagaimana Saya Memfaktorkan Semula Komponen Tindak Balas yang Messy. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!