Walaupun React adalah salah satu rangka kerja front-end yang paling popular dan paling banyak digunakan di dunia, banyak pemaju masih berjuang ketika datang ke kod refactoring untuk kebolehgunaan semula yang lebih baik. Jika anda pernah mendapati diri anda mengulangi coretan kod yang sama di seluruh aplikasi React anda, anda telah datang ke artikel yang betul.
Dalam tutorial ini, anda akan diperkenalkan kepada tiga petunjuk yang paling biasa bahawa sudah tiba masanya untuk membina komponen React yang boleh diguna semula. Kemudian kami akan melihat beberapa demo praktikal dengan membina susun atur yang boleh diguna semula dan dua cangkuk reaksi yang menarik.
Apabila anda selesai membaca, anda akan dapat memikirkan sendiri
apabila sesuai untuk membuat komponen reaksi yang boleh diguna semula, dan bagaimana untuk melakukannya.
Artikel ini menganggap pengetahuan asas mengenai reaksi dan reaksi cangkuk. Jika anda ingin menyikat topik ini, saya cadangkan anda menyemak panduan "Bermula dengan React" dan "Intorduction to React Hooks".
Takeaways Key
Mengenalpasti peluang untuk kebolehgunaan semula: Artikel memperkenalkan tiga tanda umum yang menunjukkan keperluan untuk mewujudkan komponen React yang boleh diguna semula: gaya CSS berulang untuk pembalut, kerap menggunakan pendengar peristiwa yang sama, dan pelaksanaan berulang -ulang pertanyaan atau mutasi graphql yang sama. Panduan ini membantu pemaju mengenali apabila mereka boleh abstrak kod berulang ke komponen yang boleh diguna semula, meningkatkan kebolehkerjaan dan skalabilitas aplikasi mereka.
Demonstrasi dan pelaksanaan praktikal: Melalui contoh -contoh terperinci, artikel ini menawarkan demonstrasi praktikal untuk membina komponen yang boleh diguna semula, termasuk komponen susun atur, cangkuk reaksi tersuai untuk mengurus pendengar acara, dan cangkuk untuk pertanyaan GraphQL. Contoh -contoh ini berfungsi sebagai pelan tindakan untuk pemaju untuk mengikuti, membolehkan mereka menggunakan corak yang sama dalam projek mereka sendiri untuk menyelaraskan pembangunan dan memastikan konsistensi merentasi aplikasi mereka.
Meningkatkan kecekapan kod dan skalabiliti projek: Tutorial menekankan manfaat refactoring untuk kebolehgunaan semula, seperti mengurangkan duplikasi kod, memudahkan penyelenggaraan projek, dan meningkatkan skalabilitas. Dengan mengamalkan amalan yang digariskan, pemaju boleh membuat aplikasi reaksi yang lebih cekap, bersih, dan modular, akhirnya membawa kepada kitaran pembangunan yang lebih cepat dan penyelesaian perisian yang lebih mantap.
tiga petunjuk teratas komponen reaksi yang boleh diguna semula
Pertama, mari kita lihat beberapa petunjuk apabila
anda mungkin mahu melakukan ini. penciptaan pembalut berulang dengan gaya CSS yang sama
tanda kegemaran saya untuk mengetahui kapan untuk membuat komponen yang boleh diguna semula adalah penggunaan berulang gaya CSS yang sama. Sekarang, anda mungkin berfikir, "Tunggu sebentar: mengapa saya tidak memberikan nama kelas yang sama kepada unsur -unsur yang berkongsi gaya CSS yang sama?" Anda betul -betul betul. Ia bukan idea yang baik untuk membuat komponen yang boleh diguna semula setiap kali beberapa elemen dalam komponen yang berbeza berkongsi gaya yang sama. Malah, ia mungkin memperkenalkan kerumitan yang tidak perlu. Oleh itu, anda perlu bertanya kepada diri sendiri satu perkara lagi: Adakah unsur -unsur yang biasa digayakan pembungkus ?
Sebagai contoh, pertimbangkan halaman log masuk dan pendaftaran berikut:
<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Gaya yang sama digunakan pada bekas (elemen
) dan footer setiap komponen. Jadi dalam kes ini, anda boleh membuat dua komponen yang boleh diguna semula -
dan
- dan lulus mereka sebagai anak sebagai prop. Contohnya, komponen log masuk boleh diubahsuai seperti berikut:
<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Akibatnya, anda tidak lagi perlu mengimport common.css dalam pelbagai halaman atau membuat elemen
yang sama untuk membungkus segala -galanya.
Penggunaan berulang pendengar acara
Untuk melampirkan pendengar acara ke elemen, anda boleh mengendalikannya di dalam useeffect () seperti ini:
<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span>
<span>return (...);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
atau anda boleh melakukannya secara langsung di dalam JSX anda seperti ini, seperti yang ditunjukkan dalam komponen butang berikut:
<span>// Button.js
</span><span>function <span>Button</span>() {
</span> <span>return (
</span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span> Click me!
</span><span> <span><span></button</span>></span>
</span> <span>);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Apabila anda ingin menambah pendengar acara untuk dokumen atau tetingkap, anda perlu pergi dengan kaedah pertama. Walau bagaimanapun, seperti yang anda telah sedar, kaedah pertama memerlukan lebih banyak kod dengan penggunaan useeffect (), addEventListener () dan roveEventListener (). Jadi dalam kes sedemikian, membuat cangkuk tersuai akan membolehkan komponen anda menjadi lebih ringkas.
Terdapat empat senario yang mungkin untuk menggunakan pendengar acara:
pendengar acara yang sama, pengendali acara yang sama
pendengar acara yang sama, pengendali acara yang berbeza
pendengar acara yang berbeza, pengendali acara yang sama
pendengar acara yang berbeza, pengendali acara yang berbeza
Dalam senario pertama, anda boleh membuat cangkuk di mana kedua -dua pendengar acara dan pengendali acara ditakrifkan. Pertimbangkan cangkuk berikut:
<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
anda kemudian boleh menggunakan cangkuk ini dalam komponen mana -mana seperti berikut:
<span>// App.js
</span><span>import useKeydown from './useKeydown.js';
</span>
<span>function <span>App</span>() {
</span> <span>useKeydown();
</span> <span>return (...);
</span><span>};
</span> Salin selepas log masuk
Untuk tiga senario yang lain, saya cadangkan membuat cangkuk yang menerima acara dan fungsi pengendalian acara sebagai alat peraga. Sebagai contoh, saya akan lulus keydown dan handleKeydown sebagai alat peraga ke cangkuk tersuai saya. Pertimbangkan cangkuk berikut:
<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useEventListener(<span>{ event, handler}</span> ) {
</span> <span>useEffect(() => {
</span> <span>document.addEventListener(event, props.handler);
</span> <span>return () => {
</span> <span>document.removeEventListener(event, props.handler);
</span> <span>}
</span> <span>}, []);
</span><span>};
</span> Salin selepas log masuk
Anda kemudian boleh menggunakan cangkuk ini dalam komponen mana -mana seperti berikut:
<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Penggunaan berulang skrip graphql yang sama
Anda tidak perlu mencari tanda -tanda ketika membuat kod GraphQL boleh diguna semula. Untuk aplikasi yang kompleks, skrip GraphQL untuk pertanyaan atau mutasi dengan mudah mengambil 30-50 baris kod kerana terdapat banyak atribut yang diminta. Jika anda menggunakan skrip GraphQL yang sama lebih daripada sekali atau dua kali, saya fikir ia layak mendapat cangkuk tersuai sendiri.
pertimbangkan contoh berikut:
<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Daripada mengulangi kod ini dalam setiap halaman yang meminta catatan dari hujung belakang, anda harus membuat cangkuk reaksi untuk API tertentu:
<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Membangun tiga komponen React yang boleh diguna semula
Sekarang kita telah melihat beberapa tanda umum apabila untuk membuat komponen baru yang boleh anda kongsi sepanjang aplikasi React anda, mari kita meletakkan pengetahuan itu ke dalam amalan dan membina tiga demo praktikal.
1. Komponen susun atur
React biasanya digunakan untuk membina aplikasi web kompleks. Ini bermakna sejumlah besar halaman perlu dibangunkan dalam React, dan saya ragu bahawa setiap halaman aplikasi akan mempunyai susun atur yang berbeza. Sebagai contoh, aplikasi web yang terdiri daripada 30 halaman biasanya menggunakan kurang daripada lima susun atur yang berbeza. Oleh itu, membina susun atur yang boleh digunakan semula yang boleh digunakan di banyak halaman yang berbeza adalah penting. Ini akan menjimatkan banyak baris kod dan akibatnya banyak masa.
Pertimbangkan komponen fungsi reaksi berikut:
<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span>
<span>return (...);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Ini adalah laman web biasa yang mempunyai
, dan . Sekiranya terdapat 30 lagi laman web seperti ini, anda dengan mudah akan bosan menulis tag HTML berulang kali dan menggunakan gaya yang sama berulang kali.
Sebaliknya, anda boleh membuat komponen susun atur yang menerima , dan sebagai prop, seperti dalam kod berikut:
<span>// Button.js
</span><span>function <span>Button</span>() {
</span> <span>return (
</span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span> Click me!
</span><span> <span><span></button</span>></span>
</span> <span>);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
dan . Oleh itu, anda boleh menggunakan susun atur yang sama untuk halaman tanpa mengira sama ada ia mengandungi tajuk atau footer.
Menggunakan komponen susun atur ini, anda boleh menjadikan halaman suapan anda menjadi blok kod yang lebih canggih:
<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Ramai pemaju cenderung menggunakan kedudukan: Tetap atau kedudukan: Mutlak apabila mereka mahu melekatkan tajuk ke bahagian atas viewport atau footer ke bahagian bawah. Walau bagaimanapun, dalam hal susun atur, anda harus cuba mengelakkan ini.
Oleh kerana unsur -unsur susun atur akan menjadi elemen induk prop yang diluluskan, anda ingin mengekalkan gaya elemen susun atur anda semudah mungkin - sehingga lulus , , atau digayakan seperti yang dimaksudkan. Oleh itu, saya cadangkan memohon kedudukan: Tetap dan paparan: Flex ke elemen paling luar susun atur anda dan menetapkan limpahan-y: tatal ke elemen .
Berikut adalah contoh:
<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Sekarang, mari gunakan beberapa gaya ke halaman suapan anda dan lihat apa yang telah anda bina:
<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Header Sticky dan Demo Footer
Dan inilah kod dalam tindakan.
inilah yang kelihatan seperti pada skrin desktop.
inilah yang kelihatan seperti di skrin mudah alih.
2. Pendengar acara
Sering kali, pendengar acara yang sama digunakan lebih dari satu kali di seluruh aplikasi web. Dalam kes sedemikian, ia adalah idea yang bagus untuk membuat cangkuk React Custom. Mari kita pelajari bagaimana untuk melakukan ini dengan membangunkan Hook UseScrollSaver, yang menjimatkan kedudukan tatal peranti pengguna pada halaman - supaya pengguna tidak perlu menatal lagi dari atas. Cangkuk ini akan berguna untuk laman web di mana sejumlah besar elemen, seperti jawatan dan komen, disenaraikan; Bayangkan halaman suapan Facebook, Instagram dan Twitter tanpa penyelamat tatal.
mari kita memecahkan kod berikut:
anda dapat melihat bahawa hook usescrollsaver perlu menerima dua item: scrollableDIV, yang mesti menjadi bekas scrollable seperti bekas dalam susun atur anda di atas, dan PageUrl, yang akan digunakan sebagai pengenalpasti halaman jadi Bahawa anda boleh menyimpan kedudukan tatal dari pelbagai halaman. <span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Langkah 1: Simpan kedudukan tatal
Pertama sekali, anda perlu mengikat pendengar acara "tatal" ke bekas scrollable anda:
Sekarang, setiap kali scrollableDIV ditatal oleh pengguna, fungsi yang dipanggil HandlesCroll akan dijalankan. Dalam fungsi ini, anda harus menggunakan sama ada LocalStorage atau sessionStorage untuk menyimpan kedudukan tatal. Perbezaannya ialah data di LocalStorage tidak luput, manakala data dalam SesiStorage dibersihkan apabila sesi halaman berakhir. Anda boleh menggunakan SetItem (ID: String, Nilai: String) untuk menyimpan data dalam penyimpanan sama ada: <span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span>
<span>return (...);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
<span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Langkah 2: Pulihkan kedudukan tatal
Apabila pengguna kembali ke laman web, pengguna harus diarahkan ke kedudukan tatal sebelumnya - jika ada. Data kedudukan ini kini disimpan di sessionStorage, dan anda perlu mengeluarkannya dan menggunakannya. Anda boleh menggunakan GetItem (ID: String) untuk mendapatkan data dari storan. Kemudian, anda hanya perlu menetapkan tatal-atas bekas yang boleh ditatal ke nilai yang diperolehi ini:
<span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span> <span>return (
</span> <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span> <span><span><main</span>></span>
</span><span> {...}
</span><span> <span><span></main</span>></span>
</span><span> <span><span><footer</span> className<span>='footer'</span>></span>
</span><span> {...}
</span><span> <span><span></footer</span>></span>
</span><span> <span><span></div</span>></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Langkah 3: Gunakan Hook UseScrollSaver di mana -mana laman web
3 Mari kembali ke susun atur.js dan gunakan cangkuk anda di sana. Ini akan membolehkan mana -mana laman web yang menggunakan susun atur ini untuk menikmati penyelamat tatal anda:
<span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span> <span>return (
</span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span> <span>);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Dan inilah kod yang berjalan dalam kotak pasir. Cuba tatal halaman, kemudian gunakan anak panah di sebelah kiri dan sudut bawah untuk memuatkan semula aplikasinya.
Anda akan mendapati diri anda berada di tempat yang anda tinggalkan!
3. Pertanyaan/mutasi (khusus untuk graphql)
Jika anda suka menggunakan GraphQL dengan React, seperti yang saya lakukan, anda boleh mengurangkan asas anda lebih jauh dengan membuat cangkuk React untuk pertanyaan GraphQL atau mutasi.
pertimbangkan contoh berikut untuk menjalankan getPosts pertanyaan graphql ():
<span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span>
<span>return (...);
</span><span>}
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
<span>// Button.js
</span><span>function <span>Button</span>() {
</span> <span>return (
</span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span>
</span><span> Click me!
</span><span> <span><span></button</span>></span>
</span> <span>);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
<span>// useEventListener.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>export default function useKeydown() {
</span> <span>const handleKeydown = () => {
</span> <span>alert('key is pressed.');
</span> <span>}
</span>
<span>useEffect(() => {
</span> <span>document.addEventListener('keydown', handleKeydown);
</span> <span>return () => {
</span> <span>document.removeEventListener('keydown', handleKeydown);
</span> <span>}
</span> <span>}, []);
</span><span>};
</span> Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Dalam artikel ini, anda telah mempelajari tiga petunjuk yang paling biasa dari komponen React yang boleh diguna semula dan tiga kes kegunaan yang paling popular. Sekarang anda mempunyai pengetahuan tentang apabila untuk membuat komponen reaksi yang boleh diguna semula dan bagaimana untuk melakukannya dengan mudah dan profesional. Anda tidak lama lagi akan mendapati diri anda menikmati garis refactoring kod ke dalam komponen reaksi yang boleh diguna semula atau cangkuk yang canggih. Menggunakan teknik refactoring ini, pasukan pembangunan kami di Clay dapat mengurangkan asas kami ke saiz yang boleh diurus. Saya harap anda juga boleh!
Soalan Lazim Mengenai Mewujudkan Komponen React yang Boleh Dibangkitkan
Apakah komponen yang boleh diguna semula dalam react.js?
Komponen yang boleh diguna semula dalam React.js adalah blok bangunan asas yang merangkumi kepingan tertentu fungsi antara muka pengguna (UI), menjadikannya mungkin untuk membina aplikasi secara modular dan cekap. Komponen ini direka untuk digunakan sepanjang aplikasi anda atau bahkan merentasi projek yang berbeza, menawarkan tahap kebolehgunaan semula kod yang memudahkan pembangunan dengan ketara. Mereka menggalakkan pemisahan yang jelas mengenai kebimbangan dengan merangkumi logik dan rendering mereka, memastikan butiran pelaksanaan dalaman mereka tetap tersembunyi dari seluruh permohonan. Ini bukan sahaja meningkatkan organisasi dan penyelenggaraan kod tetapi juga membolehkan pemaju bekerja lebih bersama dengan berkongsi dan menggunakan semula komponen di seluruh pasukan dan projek. Dengan menggunakan komponen yang sama di pelbagai bahagian aplikasi, anda dapat memastikan rupa dan rasa seragam, mematuhi garis panduan reka bentuk dan mewujudkan pengalaman pengguna yang lebih digilap. Komponen -komponen ini disusun melalui prop, yang membolehkan penyesuaian dan penyesuaian kepada pelbagai kes penggunaan. Ciri parameterisasi ini memberikan keseimbangan antara konsistensi dan fleksibiliti, memberikan pemaju kuasa untuk menyempurnakan tingkah laku komponen dan penampilan mengikut keperluan khusus setiap ciri permohonan atau halaman. proses. Komponen terpencil dan terkandung lebih mudah untuk diuji, dan anda boleh membuat ujian unit untuk mengesahkan ketepatan dan fungsi mereka. Dengan menggabungkan komponen yang boleh diguna semula ke dalam aplikasi React anda, anda boleh menubuhkan asas yang boleh dipelihara, modular, dan konsisten, akhirnya mempromosikan kecekapan pembangunan dan meningkatkan kualiti keseluruhan antara muka pengguna anda.
Apakah contoh komponen yang boleh diguna semula dalam React?
Contoh umum komponen yang boleh diguna semula dalam React adalah komponen "butang". Butang adalah bahagian asas antara muka pengguna dan digunakan sepanjang aplikasi untuk pelbagai interaksi. Mewujudkan komponen butang yang boleh diguna semula dalam React membolehkan anda mengekalkan rupa dan tingkah laku yang konsisten sambil mengurangkan duplikasi kod. Berikut adalah contoh mudah komponen butang yang boleh diguna semula: style = {style}
bagaimana membuat komponen yang boleh diguna semula dalam React?
Mencipta komponen yang boleh diguna semula dalam React.js adalah amalan asas untuk membina aplikasi modular dan mengekalkan. Proses ini bermula dengan pelan yang jelas, di mana anda mengenal pasti elemen fungsi tertentu atau antara muka pengguna (UI) yang anda ingin ertapsulasi dalam komponen. Sebaik sahaja anda telah menentukan tujuan komponen, anda membuat fail JavaScript/JSX baru dalam projek React anda. Ini adalah amalan yang baik untuk menamakan fail bermula dengan huruf besar, mematuhi konvensyen penamaan React. Komponen boleh berfungsi atau berasaskan kelas, bergantung kepada keperluan anda. Apabila parameterisasi komponen anda, anda menerima prop sebagai input, yang membolehkan anda menyesuaikan penampilan dan tingkah lakunya. Menentukan jenis prop menggunakan proptypes atau typescript memastikan keselamatan jenis dan kejelasan, menjadikannya lebih mudah untuk memahami bagaimana komponen harus digunakan. Sebaik sahaja komponen anda dibina, ia bersedia untuk digunakan di bahagian lain aplikasi anda. Anda boleh mengimport dan menggabungkannya, meluluskan alat peraga tertentu untuk mengkonfigurasi tingkah lakunya untuk setiap kes penggunaan.
Apakah faedah komponen yang boleh diguna semula dalam React?
komponen yang boleh diguna semula dalam React menawarkan banyak faedah yang meningkatkan proses pembangunan dan kualiti aplikasi. Mereka mempromosikan modulariti dengan memecahkan antara muka pengguna yang kompleks ke dalam blok bangunan yang lebih kecil dan mandiri, menjadikan codebase lebih teratur dan dapat dipelihara. Komponen ini memberi tumpuan kepada fungsi tertentu atau unsur UI, yang membolehkan pemaju mengurus dan mengemas kini mereka secara bebas, yang mengurangkan risiko kesan sampingan yang tidak diingini dan menyelaraskan proses pembangunan. usaha. Anda boleh menggunakan komponen yang sama di pelbagai bahagian aplikasi anda atau merentasi projek yang berbeza, menghapuskan keperluan untuk menulis semula kod serupa. Ini bukan sahaja mempercepatkan pembangunan tetapi juga memastikan antara muka pengguna yang konsisten. Konsistensi adalah satu lagi manfaat kritikal. Dengan menggunakan komponen yang sama untuk elemen UI tertentu, anda mengekalkan rupa dan tingkah laku seragam, mematuhi garis panduan reka bentuk dan meningkatkan pengalaman pengguna. Mereka menerima alat peraga, yang membolehkan pemaju menyempurnakan tingkah laku dan penampilan mereka untuk memenuhi kes penggunaan yang berbeza. Parameterisasi ini meningkatkan fleksibiliti dan fleksibiliti komponen anda. Apabila isu timbul, komponen terpencil ini lebih mudah untuk diuji dan debug, yang membolehkan penyelesaian masalah yang cekap. Selain itu, dengan berkongsi dan menggunakan semula komponen di seluruh projek, pasukan boleh bekerjasama dengan lebih berkesan, mengekalkan gaya UI bersatu, dan memastikan konsistensi kod, yang penting untuk usaha pembangunan berskala besar dan jangka panjang. Ringkasnya, komponen yang boleh diguna semula dalam React Streamline Development, menggalakkan kebolehgunaan semula kod, mengekalkan konsistensi UI, dan memberikan kebolehcapaian, akhirnya membawa kepada aplikasi yang lebih cekap, berkualiti tinggi.
Apa yang menjadikan komponen yang boleh diguna semula dalam React?
Komponen yang boleh diguna semula yang direka dengan baik dalam React mempamerkan beberapa ciri penting. Pertama dan terpenting, kebolehgunaan semula adalah atribut teras. Komponen -komponen ini harus dibuat dengan niat untuk digunakan di bahagian -bahagian yang berlainan dari aplikasi anda atau bahkan dalam projek yang berasingan. Untuk mencapai matlamat ini, mereka mesti sangat parameter, membolehkan pemaju menyesuaikan penampilan dan tingkah laku mereka melalui alat peraga. Fleksibiliti ini adalah aspek asas dari apa yang membuat komponen benar -benar boleh diguna semula.
Atas ialah kandungan terperinci Panduan praktikal untuk membuat komponen reaksi yang boleh diguna semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah rangka kerja mvvm bahagian hadapan?
Bagaimana untuk membuka jsp
Perkara yang perlu dilakukan jika penamaan semula fail sementara gagal
Apakah inskripsi dalam blockchain?
penggunaan fungsi pengisihan c++
Apa yang perlu dilakukan jika css tidak boleh dimuatkan
Tampalan keahlian Thunder
Bagaimana untuk menyegarkan cache dns
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
