Bagaimana untuk berkongsi logik antara komponen menggunakan cangkuk tersuai?

Perkongsian logik antara komponen adalah aspek penting untuk membina aplikasi reaksi yang berskala dan diselenggarakan. Sebagai pembekal cangkuk, saya telah menyaksikan secara langsung kuasa cangkuk tersuai dalam mencapai matlamat ini. Dalam catatan blog ini, saya akan menyelidiki bagaimana untuk berkongsi logik antara komponen menggunakan cangkuk tersuai, menawarkan pandangan praktikal dan contoh dunia sebenar.

Memahami cangkuk adat

Sebelum kita meneroka cara berkongsi logik, mari kita faham secara ringkas apa cangkuk adat. Cangkuk tersuai adalah fungsi JavaScript yang bermula dengan perkataan "gunakan" dan boleh memanggil cangkuk lain. Mereka membolehkan anda mengekstrak logik komponen ke dalam fungsi yang boleh diguna semula. Sebagai contoh, pertimbangkan satu senario di mana pelbagai komponen perlu mengendalikan pengesahan input borang. Daripada menduplikasi logik pengesahan dalam setiap komponen, kita boleh membuat cangkuk tersuai.

import {usestate} dari'react '; const useInputValidation = (initialValue = '') => {const [value, setValue] = useState (initialValue); const [isvalid, setIsValid] = useState (true); const handlechange = (e) => {const inputValue = e.Target.Value; setValue (inputValue); // Contoh Pengesahan Mudah: Periksa jika input tidak kosong setIsValid (inputValue.trim ()! == ''); }; kembali {nilai, isvalid, handlechange}; }; Eksport UseInputValidation lalai;

Dalam cangkuk tersuai ini, kami merangkumi logik Pengurusan dan Pengesahan Input Negeri. Mana -mana komponen yang perlu mengendalikan pengesahan input kini boleh menggunakan cangkuk ini dan bukannya melaksanakan logik dari awal.

Berkongsi logik negara

Salah satu kes penggunaan utama untuk cangkuk tersuai adalah berkongsi logik negara antara komponen. Logik negara melibatkan pengurusan keadaan dalam komponen. Mari kita lihat bagaimana kita boleh berkongsi logik negara menggunakan cangkuk tersuai.

Bayangkan kita mempunyai pelbagai komponen yang perlu menguruskan keterlihatan modal. Kita boleh membuat cangkuk tersuai untuk mengendalikan logik ini.

import {usestate} dari'react '; const useModalVisibility = () => {const [isVisible, setIsVisible] = useState (false); const showModal = () => {setIsVisible (true); }; const hidemodal = () => {setIsVisible (false); }; kembali {isvisible, showmodal, hidemodal}; }; Eksport usemodalvisibility;

Sekarang, mana -mana komponen yang perlu menguruskan penglihatan modal boleh menggunakan cangkuk tersuai ini.

Import React dari'React '; import usemodalvisibility dari './usemodalvisibility'; const modalComponent = () => {const {isVisible, showModal, hidemodal} = useModalVisibility (); kembali (<div> <butang onclick = {showModal}> tunjukkan modal </butang> {isVisible && (<div className = "modal"> <p> Kandungan modal pergi ke sini </p> <butang onclick = {Hidemodal}> Tutup modal </butang> </div>) }; Eksport ModalComponent lalai;

Dengan menggunakan cangkuk tersuai, kami telah berjaya berkongsi logik negara untuk menguruskan penglihatan modal antara komponen.

Perkongsian sisi - logik kesan

Cangkuk tersuai juga sangat baik untuk berkongsi logik sampingan - kesan. Kesan sampingan termasuk perkara seperti pengambilan data, langganan, dan manipulasi DOM.

Katakan kita mempunyai pelbagai komponen yang perlu mengambil data dari API. Kami boleh membuat cangkuk tersuai untuk mengendalikan logik pengambilan data.

import {usestate, useeffect} dari'react '; const usedataFetching = (url) => {const [data, setData] = useState (null); const [isloading, setIsloading] = useState (true); const [ralat, setError] = useState (null); useeffect (() => {const fetchData = async () => {try {const response = Await fetch (url); if (! response.ok) {membuang ralat baru ('tindak balas rangkaian tidak ok'); }; kembali {data, isloading, ralat}; }; Eksport lalai yang digunakan;

Sekarang, mana -mana komponen yang perlu mengambil data dari API boleh menggunakan cangkuk tersuai ini.

Import React dari'React '; import yang digunakan dari './usedatafetching'; const dataComponent = () => {const {data, isloading, error} = usedAdAfetching ('https://api.example.com/data'); jika (isloading) {return <p> loading ... </p>; } jika (error) {return <p> error: {error.message} </p>; } kembali (<div> {data && <pre> {json.stringify (data, null, 2)} </pre>} </div>); }; Eksport DataComponent lalai;

Aplikasi praktikal dalam industri aksesori bilik mandi

Sebagai pembekal cangkuk, saya memahami pentingnya aplikasi praktikal. Sebagai contoh, dalam industri aksesori bilik mandi, kita boleh menggunakan cangkuk tersuai untuk menguruskan keadaan senarai produk.

Katakan kita mempunyai komponen yang memaparkan senaraiCangkuk tuala aksesori bilik mandidan komponen lain yang memaparkanCangkuk bilik mandi emas. Kami boleh membuat cangkuk tersuai untuk menguruskan penapisan dan menyusun produk ini.

import {usestate} dari'react '; const useProductFiltering = (InitialProducts) => {const [Products, SetProducts] = UseState (InitialProducts); const [penapis, setFilter] = useState (''); const handleFilterChange = (e) => {const filterValue = e.Target.Value; setFilter (FilterValue); const filteredProducts = initialProducts.filter (product => product.name.tolowerCase (). Termasuk (filterValue.tolowerCase ())); setProducts (FilteredProducts); }; kembali {produk, penapis, handlefilterchange}; }; Eksport UseProductFiltering lalai;

Sekarang, kedua -dua cangkuk tuala dan komponen cangkuk bilik mandi emas boleh menggunakan cangkuk tersuai ini untuk menguruskan penapisan produk.

Kesimpulan dan panggilan untuk bertindak

Kesimpulannya, cangkuk tersuai adalah alat yang berkuasa untuk berkongsi logik antara komponen. Mereka meningkatkan kebolehgunaan semula kod, pemeliharaan, dan menjadikan aplikasi React kami lebih berskala. Sebagai pembekal cangkuk, saya komited untuk menyediakan penyelesaian berkualiti tinggi untuk berkongsi logik dalam projek anda.

Sekiranya anda berminat untuk mengetahui lebih lanjut mengenai bagaimana cangkuk tersuai kami dapat memberi manfaat kepada perniagaan anda, atau jika anda ingin memulakan perbincangan perolehan, sila hubungi. Kami di sini untuk membantu anda membina aplikasi React yang lebih baik dengan perkongsian logik yang cekap.

Rujukan

• Reaksi dokumentasi rasmi mengenai cangkuk tersuai
• "React: Up and Running" oleh Stoyan Stefanov dan Eve Porcello