Panduan praktikal untuk membuat komponen reaksi yang boleh diguna semula

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

1. 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.

2. 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.

3. 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>

<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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Komponen ini tidak memerlukan

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>

tip pro untuk membuat susun atur dengan elemen melekit

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>

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>

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.

susun atur ini berfungsi seperti yang dimaksudkan pada peranti iOS juga! Sekiranya anda tidak tahu, IOS terkenal kerana membawa masalah yang tidak dijangka berkaitan dengan pembangunan aplikasi web.

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>

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>

<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>

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>

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>

Demo Scrollsaver

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>

Jika terdapat lebih banyak atribut untuk meminta dari hujung belakang, skrip GraphQL anda akan mengambil lebih banyak ruang. Oleh itu, bukannya mengulangi skrip GraphQL dan UseQuery setiap kali anda perlu menjalankan pertanyaan getPosts (), anda boleh membuat cangkuk React 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>

Kemudian, anda boleh menggunakan cangkuk UseGetPosts () anda seperti 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>

Kesimpulan

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:

Import React dari 'React';

const const = ({label, onclick, style}) => {
return (
style = {style}
onclick = {onclick}
>
{label}

);
};

butang lalai eksport;

Dalam contoh ini, komponen butang dibina sebagai komponen fungsional yang mengambil tiga alat utama: "label" untuk teks yang dipaparkan pada butang, "onclick" untuk Pengendali acara klik, dan prop "gaya" pilihan untuk menyesuaikan penampilan butang. Komponen ini merangkumi struktur dan tingkah laku HTML butang, menjadikannya mudah diguna semula sepanjang aplikasi tanpa perlu menduplikasi kod.
Penggunaan komponen butang ini mempamerkan kebolehgunaan dan fleksibiliti. Dalam komponen induk (dalam kes ini, "App"), anda boleh lulus dalam teks label tertentu, klik fungsi pengendalian acara, dan keutamaan gaya untuk membuat butang yang berbeza dengan pelbagai tujuan dan penampilan. Dengan menggunakan komponen yang boleh diguna semula, anda mengekalkan gaya antara muka pengguna bersatu dan meningkatkan pemeliharaan kod. Komponen ini boleh dilanjutkan di luar butang untuk merangkumi unsur -unsur UI yang lebih kompleks, seperti medan input, kad, atau bar navigasi, menghasilkan aplikasi reaksi modular dan boleh dikekalkan. Komponen yang boleh diguna semula bukan sahaja mempercepatkan pembangunan tetapi juga membawa kepada antara muka yang lebih konsisten, mesra pengguna yang mematuhi garis panduan dan amalan terbaik.

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.
Hasilnya adalah asas yang lebih teratur yang menggalakkan kebolehgunaan semula kod dan mengekalkan gaya UI yang konsisten. Komponen yang boleh diguna semula boleh diintegrasikan dengan mudah ke bahagian-bahagian yang berlainan aplikasi anda, meningkatkan kecekapan pembangunan dan menyumbang kepada antara muka pengguna yang mesra pengguna dan visual.

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.
enkapsulasi adalah sama pentingnya. Komponen yang boleh diguna semula harus merangkum logik dalaman dan rendering mereka, melindungi butiran pelaksanaan dari seluruh aplikasi. Pemisahan kebimbangan ini membawa kepada kod yang lebih bersih, lebih modular dan memudahkan integrasi.
Modularity adalah satu lagi atribut utama. Komponen yang boleh diguna semula yang baik harus mempunyai tujuan tunggal, memberi tumpuan kepada sekeping fungsi tertentu atau elemen UI tertentu. Reka bentuk modular ini meningkatkan kebolehkerjaan kod dan kecekapan debugging. Tambahan pula, kemudahan ujian adalah penting. Komponen terpencil adalah lebih mudah untuk diuji, mempromosikan penciptaan kod yang mantap dan boleh dipercayai. Kejelasan ini membantu pemaju lain memahami cara menggunakan komponen dengan berkesan. Dengan menyumbang kepada antara muka pengguna yang konsisten apabila komponen yang sama digunakan untuk elemen UI tertentu, mereka memastikan aplikasi yang mesra dan mesra pengguna. Pada dasarnya, komponen yang boleh diguna semula yang baik boleh dikonfigurasikan, dikemas, modular, mudah diuji, dan menyumbang kepada pemeliharaan kod dan konsistensi UI.

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!