Rumah >hujung hadapan web >tutorial js >Panduan praktikal untuk membuat komponen reaksi yang boleh diguna semula
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
anda mungkin mahu melakukan ini. 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: Gaya yang sama digunakan pada bekas (elemen Akibatnya, anda tidak lagi perlu mengimport common.css dalam pelbagai halaman atau membuat elemen Untuk melampirkan pendengar acara ke elemen, anda boleh mengendalikannya di dalam useeffect () seperti ini: atau anda boleh melakukannya secara langsung di dalam JSX anda seperti ini, seperti yang ditunjukkan dalam komponen butang berikut: 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: Dalam senario pertama, anda boleh membuat cangkuk di mana kedua -dua pendengar acara dan pengendali acara ditakrifkan. Pertimbangkan cangkuk berikut: anda kemudian boleh menggunakan cangkuk ini dalam komponen mana -mana seperti berikut: 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: Anda kemudian boleh menggunakan cangkuk ini dalam komponen mana -mana seperti berikut: 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: Daripada mengulangi kod ini dalam setiap halaman yang meminta catatan dari hujung belakang, anda harus membuat cangkuk reaksi untuk API tertentu: 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.
penciptaan pembalut berulang dengan gaya CSS yang sama
<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>
<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>
Penggunaan berulang pendengar acara
<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>// 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>
<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>
<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>
<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>
<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
<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>
<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
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. <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
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!