از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای React ComponentA احتمالاً مهمترین مفهومی است که در React باید درک کنید. این یکی از بلوک‌های اصلی React است که به ما امکان می‌دهد یک UI را به قطعات مستقل و قابل استفاده مجدد تقسیم کنیم و کار ساخت UI را بسیار آسانتر می‌کند. سپس همه این اجزای مستقل با هم ترکیب می شوند …
سرفصلهای مطلب
معرفی
یک جزء احتمالا مهم ترین مفهومی است که در React باید فهمید. یکی از بلوک های ساختمان اصلی React که به ما امکان می دهد یک UI را به قطعات مستقل و قابل استفاده مجدد تقسیم کنیم و کار ساخت UI را بسیار آسان تر می کند. سپس تمام این اجزای مستقل در یک مولفه والد ترکیب می شوند که به عنوان رابط کاربری نهایی ما عمل می کند.
در این راهنما، نگاهی به کامپوننت ها و روش کار آنها در React خواهیم داشت، همچنین روش انتقال داده ها از یک مؤلفه به مؤلفه دیگر را با استفاده از لوازم جانبی.
کامپوننت چیست؟
آ جزء یک بلوک کد مستقل و قابل استفاده مجدد است که به جای ساختن کل UI در یک فایل، رابط کاربری را به قطعات کوچکتر تقسیم می کند. دکمه ها، فرم ها، گفتگو و غیره روی همه را می توان به عنوان اجزاء بیان کرد. اجزای React ورودی های دلخواه را می پذیرند (“لوازم”) و عناصر React یا کد JSX را برگردانید که می گوید چه چیزی باید رندر شود روی صفحه نمایش
برای نشان دادن روش کار کامپوننت ها، رابط کاربری یک مثال را تجزیه کرده ایم برنامه Todo به اجزای جداگانه:
این برنامه Todo از تشکیل شده است چهار جزء مختلف که به درک و نگهداری کد کمک می کند. هنگام ساخت برنامه‌های بزرگتر، می‌توانیم با مؤلفه‌های زیادی مواجه شویم، بنابراین داشتن کدهای ساختاریافته و خوانا بسیار مهم است.
توجه داشته باشید: کنوانسیون به طور گسترده پذیرفته شده می گوید که نام تمام اجزاء باید با حرف بزرگ شروع کنید
انواع کامپوننت ها در React
در React، در درجه اول دو نوع کامپوننت وجود دارد – عملکردی و کلاس اجزاء.
اجزای عملکردی
این است ساده ترین راه برای ایجاد یک کامپوننت، اولین و توصیه شده نوع مؤلفه در React است. یک مؤلفه تابعی اساساً یک تابع JavaScript/ES6 است که یک نحو خاص جاوا اسکریپت به نام را برمی گرداند. JSX یا عنصر React. تابع زیر یک جزء تابعی معتبر است که یک را دریافت می کند موضوع خواص، معمولاً نامگذاری می شود لوازم جانبی.
function Introduction(props) {
return <h1>Hello, I am {props.name}</h1>;
}
از طرف دیگر، ما همچنین می‌توانیم یک مؤلفه کاربردی با استفاده از تابع فلش نشانه گذاری:
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
توجه داشته باشید: در اصل، این فقط یکی دیگر از عملکردهای جاوا اسکریپت است. آنچه آن را از سایر توابع معمول متمایز می کند، مقدار بازگشتی آن است – کد فرمت شده JSX (JavaScript XML).
اجزای کلاس
را کلاس جزء یک کلاس ES6 است که گسترش می یابد React کامپوننت کلاس و باید a داشته باشد render() روشی که JSX را برمی گرداند. در صورت لزوم، پروپ های سازنده را می پذیرد.
این جزء نوع دوم است و بیشتر مورد استفاده قرار می گیرد زیرا “حالت” در نسخه های قدیمی React (قبل از 16.8) نمی توان در اجزای عملکردی استفاده کرد. در نتیجه، مؤلفه‌های تابعی فقط برای رندر رابط کاربری استفاده می‌شوند، در حالی که مؤلفه‌های کلاس برای مدیریت داده‌ها و برخی عملیات اضافی مانند روش‌های چرخه حیات و غیره استفاده می‌شوند. روی. با این حال، با معرفی واکنش قلاب، این تغییر کرده است و اکنون می توانیم از حالت ها در اجزای تابعی نیز استفاده کنیم.
در زیر، همان است Introduction جزء، اما این بار به عنوان یک جزء کلاس ایجاد شده است:
class Introduction extends React.Component {
render() {
return <h1>Hello, I am {this.props.name}</h1>;
}
}
توجه داشته باشید: اکنون که هر دو مؤلفه عملکردی و کلاسی را ایجاد کردیم، این دو را با هم مقایسه کنید – می بینید که محتویات اساساً یکسان هستند.
استفاده از کامپوننت ها در React
تاکنون روش ایجاد یک جزء تابعی یا کلاسی را دیده ایم. حال، بیایید نگاهی به روش استفاده از این مؤلفه ها در یک مؤلفه والد بیاندازیم. برای اینکه بتوانیم بعداً از یک مؤلفه (یا در مؤلفه اصلی) استفاده کنیم، ابتدا باید export تا بتوانیم import آن را در جای دیگر:
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
export default Introduction;
پس از وارد کردن، می توان به آن در قسمت اشاره کرد والدین جزء (در این مورد، App جزء):
import Introduction from './Introduction';
const App = () => {
return (
<div className="App">
<Introduction name="John Doe" />
</div>
);
}
انتقال داده ها از طریق Props به کامپوننت ها
وقتی React را با استفاده از create-react-app دستور، ما به طور خودکار یک جزء کاربردی را در خود دریافت می کنیم App.js فایلی که به عنوان نقطه شروع برای برنامه ما عمل می کند. اکثر ما داده ها به احتمال زیاد در ساکن خواهد بود App.js هنگامی که برنامه های خود را می سازیم، فایل را ثبت کنید، و بدون شک می خواهیم این داده ها را به اجزای جدید (کامپوننت های کودک) منتقل کنیم. لوازم جانبی، که مخفف “ویژگی ها” است، برای انجام این کار استفاده می شود.
این یک مفهوم مهم در React است که به کامپوننت ها اجازه می دهد با یکدیگر ارتباط برقرار کنند. لوازم هستند فقط خواندنی، بنابراین آنها فقط می توانند داده ها را در یک جهت (از مولفه های والد به فرزند) منتقل کنند. Props اجازه نمی دهد داده ها از فرزند به والد یا از جزء به جزء در همان سطح منتقل شوند.
بیایید اکنون یک را ایجاد کنیم Button کامپوننت، و سپس نام دکمه های مختلف را به عنوان ابزار ارسال کنید:
const Button = (props) => {
return (
<div>
<button class="btn">{props.name}</button>
</div>
);
};
export default Button;
برگردیم به App.js فایل کنید و ببینید چگونه می توانیم داده ها را با استفاده از props به مؤلفه دکمه منتقل کنیم. تنها کاری که باید انجام دهیم این است که یک تکیه گاه تعریف کنیم روی را Button کامپوننت و یک مقدار به آن اختصاص دهید:
import Button from './Button';
const App = () => {
return (
<div className="App">
<h1>Hello World</h1>
<Button name="Login" />
<Button name="Logout" />
<Button name="Sign Up" />
</div>
);
};
export default App;
توجه داشته باشید: ما باید import کامپوننت را برای ما به استفاده از آن در مولفه والد.
از Props می توان برای ارسال هر نوع داده، از جمله آرایه ها و اشیاء استفاده کرد، بنابراین محدودیتی برای استفاده از آنها وجود ندارد.
تقسیم یک برنامه به کامپوننت
قبل از اینکه این راهنما را جمع آوری کنیم، بیایید نگاهی به نمونه ای از a بیاندازیم StudentInfo جزء که شامل جزئیات دانش آموزان و جزئیات نمره است.
const StudentInfo = (props) => {
return (
<div className="student">
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
این طول می کشد student شی با اطلاعات زیادی در آن (به عنوان لوازم جانبی) و یک کارت دانشجویی را برای نمایش مشخصات دانش آموز در کنار نمره و نکته دانش آموز توصیف می کند. به دلیل تودرتو، تغییر این جزء ممکن است دشوار باشد و همچنین استفاده مجدد از بخش های جداگانه آن دشوار است.
بیایید یک جزء از آن استخراج کنیم، و آن است StudentInfo بخش:
const StudentInfo = (props) => {
return (
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
);
};
export default StudentInfo;
اکنون می توانیم مولفه والد را به شکل زیر ساده کنیم:
import StudentInfo from './StudentInfo';
const StudentInfo = (props) => {
return (
<div className="student">
<StudentInfo student="props.student" />
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
استخراج اجزا ممکن است در ابتدا خسته کننده به نظر برسد، اما داشتن مجموعه ای از اجزای قابل استفاده مجدد برای ما در برنامه های بزرگتر مفید است.
نتیجه
در این راهنما، ما توانسته ایم روش کار کامپوننت ها در React، دو نوع کامپوننت و روش انتقال داده ها از یک مؤلفه به مؤلفه دیگر با استفاده از props را بیاموزیم.
منتشر شده در 1403-01-09 23:54:03
