Rumah > Artikel > hujung hadapan web > Memahami dan Mencipta Cangkuk Tersuai dalam React
Pastikan anda mempunyai pengetahuan latar belakang yang diperlukan dalam perkara ini:
Pengetahuan Asas React
Node.js dan npm
Untuk bermula dengan projek React baharu menggunakan Vite, ikut langkah berikut:
i. Buka terminal anda dan jalankan arahan berikut untuk mencipta projek baharu:
npm create vite@latest my-react-app --template react
ii. Navigasi ke dalam direktori projek anda:
cd my-react-app
iii. Pasang kebergantungan: Pasang pakej yang diperlukan untuk projek anda:
npm install
iv. Mulakan pelayan pembangunan: Jalankan pelayan pembangunan:
npm run dev
Apl React anda kini akan berjalan dan anda boleh melihatnya dalam penyemak imbas anda di http://localhost:5173.
Cangkuk React ialah fungsi khas yang membolehkan anda menggunakan keadaan dan ciri React lain dalam komponen berfungsi. Cangkuk seperti useState dan useEffect adalah penting untuk menguruskan keadaan dan kesan sampingan.
cangkuk tersuai boleh digambarkan sebagai cara untuk menggunakan semula logik merentas berbilang komponen. Daripada mengulangi kod, anda boleh merangkumnya dalam cangkuk tersuai, menjadikan komponen anda lebih bersih dan kod anda lebih mudah untuk diurus. sama seperti cangkuk React apabila menggunakan cangkuk tersuai pastikan anda memulakan nama komponen anda dengan (gunakan diikuti dengan nama yang anda ingin berikan kepada komponen tersebut, cth useFetchData).useFetchData boleh menjadi Cangkuk tersuai yang mengambil data daripada API dan mengembalikannya kepada anda komponen.
Memahami Cangkuk:
Cangkuk seperti useState, useEffect dan useContext membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Ia adalah blok binaan yang membolehkan anda mengendalikan logik komponen secara modular.
Cakuk tersuai membolehkan anda menggunakan semula logik stateful merentas komponen yang berbeza. Contoh mudah ialah komponen pembilang, yang mempunyai kefungsian kenaikan, pengurangan dan penetapan semula, jika anda memerlukan logik yang sama dalam berbilang komponen, logik boleh dialihkan ke cangkuk tersuai. Contoh lain yang biasa digunakan ialah komponen yang mengambil data daripada API dan jika anda memerlukan logik yang sama dalam berbilang komponen, anda boleh mengalihkan logik itu ke cangkuk tersuai.
Contoh: biarkan buat App pembilang mudah dengan React hook(useState).in app.jsx
import React, { useState } from "react"; import "./App.css"; function App() { // usestate hooks const [counterstate, setCounterstate] = useState(0); // function for increment,decrement and reset const increment = () => { setCounterstate((prev) => prev + 1); }; const decrement = () => { setCounterstate((prev) => prev - 1); }; const reset = () => { setCounterstate(0); }; return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{counterstate}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
dalam kod di atas, logik boleh guna semula termasuk keadaan balas, keadaan awal(o), penambahan, pengurangan dan fungsi set semula. kenaikan menambah 1 kepada keadaan awal manakala susut menolak 1 daripada keadaan awal, manakala set semula ditetapkan semula kepada keadaan awal pertama.
kita boleh mencipta folder dalam folder src bernama Hooks, kemudian fail dipanggil useCouter.jsx untuk cangkuk tersuai seperti yang ditunjukkan di bawah.
import React, { useState } from "react"; const useCounter = (initialvalue) => { const [value, setValue] = useState(initialvalue); const increment = () => { setValue((prev) => prev + 1); }; const decrement = () => { setValue((prev) => prev - 1); }; const reset = () => { setValue(initialvalue); }; return { value, increment, decrement, reset }; }; export default useCounter;
sekarang, Mari gunakan cangkuk tersuai kami dalam App.jsx.
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; function App() { const { value, increment, decrement, reset } = useCounter(0); return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{value}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
Mari buat cangkuk tersuai useFetch untuk semua panggilan API.
import React, { useState, useEffect } from "react"; const useFetch = (url) => { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, error, loading }; }; export default useFetch;
dalam App.jsx, kami boleh menggunakan cangkuk tersuai ini untuk mengambil nama pengguna daripada pemegang tempat JSON seperti yang ditunjukkan di bawah;
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; import useFetch from "./Hooks/useFetch"; function App() { const { value, increment, decrement, reset } = useCounter(0); const { data, error, loading } = useFetch( "https://jsonplaceholder.typicode.com/users" ); return ( <div className="container"> <div> <h1>Counter Appp </h1> <h2>{value}</h2> {loading && <div>Loading....</div>} {error && <div>Error: {error.message}</div>} {data && data.length > 0 && ( <div> <h2>Username: {data[0].username}</h2> </div> )} <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
Salah satu faedah utama ialah kebolehgunaan semula. Anda boleh menggunakan cangkuk tersuai yang sama dalam berbilang komponen, mengurangkan pertindihan kod.
Cakuk tersuai membantu anda memisahkan logik daripada UI. Komponen anda menumpukan pada pemaparan, manakala cangkuk tersuai mengendalikan logik.
Dengan mengalihkan logik kompleks ke cangkuk tersuai, komponen anda menjadi lebih mudah dan lebih mudah difahami.
Kail tersuai harus bermula dengan perkataan "gunakan" untuk mengikuti konvensyen penamaan React. Ini juga membantu dalam mengenal pasti cangkuk dengan cepat dalam kod anda.
Contoh: useFetch, useForm, useAuth.
Apabila menggunakan cangkuk seperti useEffect di dalam cangkuk tersuai, pastikan anda mengendalikan kebergantungan dengan betul untuk mengelakkan pepijat atau pemaparan semula yang tidak perlu.
Optimumkan cangkuk tersuai anda dengan menghafal nilai atau menggunakan cangkuk seperti useCallback dan useMemo untuk mengelakkan menjalankan semula pengiraan mahal atau mengambil semula data.
kami telah meneroka konsep cangkuk tersuai dan peranannya dalam memudahkan dan meningkatkan pembangunan aplikasi React. Dengan mencipta cangkuk tersuai, anda boleh merangkum dan menggunakan semula logik stateful, yang membantu dalam memastikan komponen anda bersih dan boleh diselenggara.
Lihat projek di GitHub: Repositori GitHub Saya
Atas ialah kandungan terperinci Memahami dan Mencipta Cangkuk Tersuai dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!