اجزای React قابل استفاده مجدد چیست؟ شما می توانید آنها را به عنوان بلوک های سازنده در نظر بگیرید. آنها کدهای مستقلی هستند که می توانند مجدداً در سرتاسر وب سایت شما استفاده شوند تا در وقت و تلاش شما صرفه جویی شود.

آنها می توانند هر چیزی از دکمه های ساده تا اشکال پیچیده باشند.

چرا از قطعات قابل استفاده مجدد استفاده کنیم؟

همانطور که وب سایت شما رشد می کند، می توانید به راحتی ویژگی های جدیدی را با ترکیب اجزای موجود اضافه کنید. این باعث می شود کد شما مقیاس پذیرتر و سازگارتر باشد.

شما می توانید از کد قابل استفاده مجدد خود در پروژه های آینده استفاده کنید بدون اینکه دوباره آن را از ابتدا بنویسید.

🏭 چگونه کامپوننت های واکنشی قابل استفاده مجدد بسازیم

در اینجا دو نکته مهم وجود دارد که هنگام ایجاد کامپوننت‌های React قابل استفاده مجدد باید در نظر داشته باشید:

1. 🩼جلوگیری از عوارض جانبی

منطقی که با داده های خارجی (مانند برقراری تماس های API) در تعامل است را مستقیماً در یک جزء قابل استفاده مجدد قرار ندهید. در عوض، این منطق را به عنوان props به کامپوننت منتقل کنید.

به عنوان مثال، اگر یک دکمه بیشتر از ظاهر زیبا مانند واکشی داده ها از اینترنت انجام دهد، ممکن است قابل استفاده مجدد نباشد.

این یک جزء دکمه قابل استفاده مجدد است. اما فاقد بهترین شیوه ه است. من دلیل آن را در بخش مثال به شما نشان خواهم داد.

 // This is a reusable button component (bad practice!) const Button = () => { return ( <button> Click Me </button> ); }

2. 🗃️ از Props استفاده کنید

Props آرگومان هایی هستند که شما به یک جزء برای سفارشی کردن رفتار و ظاهر آن ارسال می کنید. این به شما امکان می دهد از یک جزء برای اهداف مختلف استفاده کنید.

 // This is a button component that can change its color const Button = ({ color }) => { return ( <button style={{ backgroundColor: color }}> Click Here </button> ); }

این هنوز یک عمل بد است زیرا شما یک برچسب ثابت به نام "اینجا را کلیک کنید" دارید. اگر می‌خواهید متن روی دکمه‌تان را به «ثبت‌نام» تغییر دهید، باید به مؤلفه دکمه برگردید و آن تغییر را انجام دهید.

این بدان معناست که هر بار که می‌خواهید از متن دیگری استفاده کنید، باید به عقب برگردیم و کد را ویرایش کنیم. به عبارت دیگر، دیگر قابل استفاده مجدد نیست.

💪 چالش: پس راه حل چیست؟

شما قبلاً پاسخ را دارید. اما اگر این کار را نکردید، در بخش مثال به شما نشان خواهم داد.

🌴 نکته: به این فکر کنید که چگونه ممکن است بخواهید از کامپوننت در موقعیت های مختلف استفاده کنید و آن را به گونه ای طراحی کنید که انعطاف پذیر و سازگار باشد.

🍃نمونه هایی از کامپوننت های React قابل استفاده مجدد

در اینجا چند نمونه رایج از کامپوننت‌های React قابل استفاده مجدد، همراه با چند نمونه کد برای شروع کار آورده شده است:

دکمه ها

دکمه های اصلی با سبک ها و عملکردهای مختلف.

 // Button component import React from "react"; const Button = ({ color, label, onClick }) => { return ( <button className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`} onClick={onClick} > {label} </button> ); }; export default Button; // Using the Button component <Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

همانطور که می بینید، من در مؤلفه button «اینجا را کلیک کنید» ننوشتم. من می خواهم دکمه خود را قابل استفاده مجدد کنم و پس چیزی در مورد سبک ها یا متون سفارشی نمی داند.

پس ، من آنها را به عنوان ابزار (یعنی رنگ، برچسب و onClick) ارسال کردم تا در آینده بدون دست زدن به اجزای اصلی دکمه، آنها را تغییر دهم. امیدواریم که آن را روشن کند.

🪜راه حل: شما باید هر قابلیت را به عنوان props در جزء قابل استفاده مجدد منتقل کنید.

نوارهای ناوبری

نوارهای ناوبری که ناوبری ثابتی را در وب سایت شما ارائه می دهند.

 // Navbar component import React from "react"; const Navbar = ({ isLoggedIn }) => { return ( <div className="navbar"> <div className="navbar-container"> <div className="navbar-logo"> <img src={logo} alt="logo" /> </div> <div className="navbar-links"> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> {isLoggedIn ? ( <a href="/profile">Profile</a> ) : ( <a href="/login">Login</a> )} </div> </div> </div> ); }; export default Navbar; // Using the Navbar component <Navbar isLoggedIn={true} />

همانطور که می بینید، <Navbar isLoggedIn={true} /> پاس کردم

این خط از مولفه Navbar استفاده می‌کند و پروپ isLoggedIn را با مقدار true ارسال می‌کند، که نشان می‌دهد کاربر وارد شده است. این پیوند "پروفایل" را نمایش می‌دهد و پیوند "ورود" را پنهان می‌کند.

مانند مؤلفه دکمه، مؤلفه Navbar قابل استفاده مجدد است و لوازمی را برای سفارشی کردن رفتار خود می پذیرد. کامل!

چرا API در یک کامپوننت دکمه ای فراخوانی می کند یک عمل بد است

اکنون، همه چیز را در مورد اجزای قابل استفاده مجدد در React می‌دانید.

بیایید با حل یک مشکل پیچیده عمیق تر کاوش کنیم.

سناریویی را در نظر بگیرید که در آن دکمه ای دارید که تماس API را انجام می دهد. کد مولفه دکمه می تواند به صورت زیر باشد:

 import React from "react"; import doAPICall from "../api" const SaveButton = () => { return ( <button onClick={() => { doAPICall(); }} > Save </button> ); } export default SaveButton

کاملاً واضح است که نمی‌توانید از دکمه بالا در مکان‌های مختلف استفاده مجدد کنید زیرا این مؤلفه دکمه حاوی یک اثر جانبی ( doAPICall() ) در داخل آن است.

می توانید این جزء را قابل استفاده مجدد کنید. ابتدا باید عارضه جانبی را استخراج کنید و آن را به عنوان یک تکیه گاه به مولفه دکمه مانند زیر منتقل کنید:

 const App = () => { function doAPICall() { // Does an API call to save the current state of the app. } return ( <div> <SaveButton onClick={doAPICall}/> </div> ) }

مولفه دکمه باید به شکل زیر باشد:

 const SaveButton = ({ onClick }) => { return ( <button onClick={onClick} > Save </button> ); }

همانطور که می بینید، دکمه بالا اکنون می تواند در هر جایی که می خواهید داده ها را ذخیره کنید، با کلیک یک دکمه مجددا استفاده می شود. اکنون می توان از این دکمه در چندین مکان استفاده کرد:

 const App = () => { function saveUser() { // Does an API call to save the user. } function saveProject() { // Does an API call to save the project. } return ( <div> <SaveButton onClick={saveUser}/> <SaveButton onClick={saveProject}/> </div> ) }

همچنین می‌توانید با استفاده از یک پایه برای کنترل برچسب، اجزای دکمه را قابل استفاده‌تر کنید:

 const App = () => { function saveUser() { // Does an API call to save the user. } function saveProject() { // Does an API call to save the project. } return ( <div> <SaveButton onClick={saveUser} label="Save user" /> <SaveButton onClick={saveProject} label="Save project" /> </div> ) }

مولفه دکمه باید به شکل زیر باشد:

 const SaveButton = ({ onClick, label }) => { return ( <button onClick={onClick} > {label} </button> ); }

👏نتیجه گیری

تبریک می گویم! شما با موفقیت یاد گرفتید که چگونه اجزای React قابل استفاده مجدد بسازید.

به یاد داشته باشید، اجزای قابل استفاده مجدد، بلوک های سازنده توسعه قوی React هستند. با تمرین اجزای قابل استفاده مجدد، می توانید برنامه های React تمیزتر، کارآمدتر و قابل نگهداری تر بسازید.

هرچه بیشتر تمرین کنید، در شناسایی فرصت ها برای استفاده از آنها در پروژه های خود بهتر خواهید بود!

بیشتر بخوانید: آینده توسعه Frontend

از اینکه برای خواندن این مقاله وقت گذاشتید متشکرم. تا دفعه بعد.. به یادگیری ادامه دهید و می توانید برای اطلاع از آخرین به روز رسانی های برنامه نویسی و بهره وری من را در 𝕏 دنبال کنید.

خبرکاو