Jika Anda telah bekerja dengan React untuk sementara waktu, Anda mungkin menemukan wadah dan komponen presentasi , atau komponen pintar dan bodoh. Istilah-istilah ini menggambarkan belt hold yang membagi lapisan UI komponen React dari logika.
Memisahkan UI dari logika bisnis bukanlah hal yang unik untuk React: pemisahan kekhawatiran adalah prinsip desain yang memiliki sudah ada di tahun 70-an. Misalnya, merupakan praktik umum untuk memisahkan kode yang mengakses database dari logika bisnis di backend.
Jadi di React, kami memecahkan masalah ini dengan membuat komponen container yang berisi semua logika, yang kemudian akan meneruskan data melalui props ke komponen presentasi.
Dengan pengenalan kait React, ada pendekatan baru untuk ini: menggunakan kait khusus.
Mengapa kita harus memisahkan logika dari komponen?
Sebelum kita mulai memisahkan logika dari komponen React kita, kita harus tahu alasannya.
Mengatur kode kita dengan cara di mana setiap fungsi atau komponen bertanggung jawab hanya untuk satu hal memiliki keuntungan yang besar lebih mudah untuk mengubah dan memelihara (Dave dan Andrew menyebutnya “ortogonalitas”dalam buku mereka Programmer Pragmatis).
Menerapkan ini ke React berarti komponen kita akan terlihat lebih bersih dan lebih teratur. Kita tidak perlu menggulir melewati dinding logika sebelum mengedit UI, misalnya.
Mengatur kode Anda seperti ini tidak hanya membuatnya terlihat lebih baik dan lebih mudah dinavigasi, tetapi juga membuat perubahan lebih mudah karena mengubah hook tidak memengaruhi UI dan sebaliknya.
Pengujian juga lebih mudah diakses: kita dapat menguji logika secara terpisah dari UI jika kita mau. Namun, keuntungan paling signifikan bagi saya adalah bagaimana pendekatan ini mengatur kode saya.
Bagaimana memisahkan logika dengan React hooks
Untuk memisahkan logika dari komponen kami, pertama-tama kami akan membuat kait khusus.
Mari kita ambil komponen ini sebagai contoh. Ini menghitung nilai eksponensial dari bilangan dasar dan eksponen:
Anda dapat menemukan kode sumber lengkap di sini.
Kode terlihat seperti berikut:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Ini mungkin sudah terlihat baik-baik saja, tetapi demi tutorial ini, cukup membayangkan bahwa ada lebih banyak logika di sini.
Sebagai langkah pertama, kami akan pindahkan logika ke kait khusus dan menyebutnya di dalam komponen kita.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Kita bisa memindahkan kail ini ke a file terpisah untuk pemisahan keprihatinan yang lebih menonjol.
Selain itu, kami selanjutnya dapat memisahkan kait kami menjadi fungsi yang lebih kecil dan dapat digunakan kembali. Dalam hal ini, kami hanya dapat mengekstrak calculateExponent.
gunakanExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Menguji fungsi-fungsi ini jauh lebih mudah daripada menguji seluruh kode komponen dari contoh pertama. Kita bisa mengujinya dengan library pengujian Node.js, yang bahkan tidak perlu mendukung komponen React.
Kami sekarang memiliki kode khusus kerangka kerja kami (Bereaksi) dalam kode untuk komponen dan kait, sementara logika bisnis kami hidup dalam berbagai fungsi yang kami definisikan nanti (yang merupakan kerangka-agnostik).
Praktik terbaik
Penamaan
Saya suka memberi nama kait khusus saya setelah komponen sebagai rangkaian dari use dan nama komponen (mis useExponentCalculator). Saya kemudian memanggil berkas yang sama sebagai pengait.
Anda mungkin ingin mengikuti konvensi penamaan yang berbeda, tetapi saya sarankan tetap konsisten dalam proyek Anda.
Jika saya dapat menggunakan kembali bagian dari kait khusus, saya biasanya memindahkannya ke file lain di bawah src/hooks.
Jangan berlebihan
Cobalah bersikap pragmatis. Jika suatu komponen hanya memiliki beberapa baris JS, logikanya tidak perlu dipisahkan.
CSS-dalam-JS
Jika Anda menggunakan pustaka CSS-in-JS (useStyles), Anda mungkin ingin memindahkan kode ini ke file lain juga.
Anda bisa memindahkannya ke file yang sama dengan hook. Namun, saya lebih suka menyimpannya di atas komponen dalam file yang sama atau memindahkannya ke filenya sendiri jika terlalu besar.
Kesimpulan
Apakah Anda berpikir bahwa menggunakan kait khusus meningkatkan kode Anda atau tidak, pada akhirnya, itu tergantung pada preferensi pribadi. Jika basis kode Anda tidak menyertakan banyak logika, keuntungan dari pola ini tidak akan terlalu relevan untuk Anda.
Kait khusus hanya satu cara untuk meningkatkan modularitas; Saya juga sangat merekomendasikan memisahkan komponen dan fungsi menjadi bagian yang lebih kecil dan dapat digunakan kembali bila memungkinkan.
Topik ini juga dibahas pada tingkat yang lebih umum di Programmer Pragmatis. Saya menulis sebuah artikel yang mencakup topik favorit saya dari buku ini, jadi jika itu menarik minat Anda, pastikan untuk lihat itu.
