توسعه دهنده جاواسکریپت
الگوهای ری اکت - ۳
تو این مقاله میخوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.
تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.
برای مطالعه قسمت های قبلی:
سرفصل های این قسمت:
Proxy components, Style component, Event switch, Layout component
استفاده از Proxy component
دکمه ها همه جا توی وب اپلیکیشن ها هستند. معمولا برای نوشتن یک دکمه از کد زیر استفاده میکنیم:
<button type="button">
اینکه بیایم برای همه دکمه ها از صفت type و نوع button استفاده کنیم کار درستی نیست ( احتمال وجود خطا رو افزایش میده) به جاش از یک کامپوننت مرتبه بالاتر استفاده میکنیم:
const Button = props =>
<button type="button" {...props}>
خوب حالا به راحتی میشه کامپوننت Button رو هرجایی که خواستیم استفاده کنیم و خیالمون راحت باشه که صفت type همه دکمه ها همواره button هستش.
<Button />
// <button type="button"><button>
<Button className="CTA">Send Money</Button>
// <button type="button" class="CTA">Send Money</button>
استفاده از Style component
مثل پروکسی کامپوننت ، اما این بار با طعم استایل!
یک دکمه داریم که میخواهیم با کلاس primary اون رو نمایش بدیم:
<button type="button" className="btn btn-primary">
خب، برای نمایش این دکمه میتونیم از چندین روش استفاده کنیم:
import classnames from "classnames"
const PrimaryBtn = props => <Btn {...props} primary />;
const Btn = ({ className, primary, ...props }) => (
<button
type="button"
className={classnames("btn", primary && "btn-primary", className)}
{...props}
/>
);
نکته: ماژول classnames به ما کمک میکنه که از چندتا کلاس ( استایل ) استفاده کنیم و بتونیم استایل های مختلف رو باهمدیگه ترکیب کنیم.
به صورت تصویری میتونیم ببینیم که :
PrimaryBtn()
↳ Btn({primary: true})
↳ Button({className: "btn btn-primary"}, type: "button"})
↳ '<button type="button" class="btn btn-primary"></button>'
درنهایت این ۳ تا کامپوننت که میبینید یکی هستند:
<PrimaryBtn />
<Btn primary />
<button type="button" className="btn btn-primary" />
این روش کمک میکنه که نگه داری استایل ها تو کامپوننت ساده تر باشه.
استفاده از Event switch
معمولا زمانی که تابع handler مینویسیم ، اسم کاری که میخواهیم انجام بدیم رو هم اضافه میکنیم، مثل این تابع که اسم کلیک کردن رو بهش اضافه کردیم:
handleClick(e) { /* do something */ }
برای کامپوننتی که چندین رویداد مختلف رو مدیریت میکنه، این اسم تابع میتونه تکراری باشه:
handleClick() { require("./actions/doStuff")(/* action stuff */) }
handleMouseEnter() { this.setState({ hovered: true }) }
handleMouseLeave() { this.setState({ hovered: false }) }
میتونیم یک تابع handler داشته باشیم و از switch / case کمک بگیریم:
handleEvent({type}) {
switch(type) {
case "click":
return require("./actions/doStuff")(/* action dates */)
case "mouseenter":
return this.setState({ hovered: true })
case "mouseleave":
return this.setState({ hovered: false })
default:
return console.warn(`No case for event type "${type}"`)
}
}
همچنین برای کامپوننت های ساده میتونیم به جای نوشتن تابع handler ، از خود اکشن به همراه arrow function استفاده کنیم. مثال زیر نحوه انجام این کار رو نشون میده :
<div ={() => someImportedAction({ action: "DO_STUFF" })}
استفاده از Layout component
بعضی از کامپوننت ها وظیفه صفحه بندی (لایه های سایت و ... ) رو به عهده دارند. ازونجایی که این سبک کامپوننت ها، المنت های استاتیک DOM رو تشکیل میدهند پس لازم نیست که دائم در حال آپدیت شدن باشند.
کامپوننتی رو در نظر بگیرید که دوتا children رو در کنار هم رندر میکنه:
<HorizontalSplit
leftSide={<SomeSmartComponent />}
rightSide={<AnotherSmartComponent />}
/>
خب ، میخواهیم این کامپوننت رو بهینه کنیم ( چون کارش استایل دهی و لایه بندی صفحه هست ، نیازی نیست که دائم در حال آپدیت شدن باشه).
ما میتونیم بدون اینکه لایف سایکل کامپوننت های فرزند رو تغییر بدیم، اجازه ندیم که کامپوننت پدر آپدیت شه:
class HorizontalSplit extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
return (
<FlexContainer>
<div>{this.props.leftSide}</div>
<div>{this.props.rightSide}</div>
</FlexContainer>
);
}
}
قسمت آخر این نوشته:
سایر مقاله های من در ویرگول:
Follow me on social media
Telegram
Virgool
مطلبی دیگر از این انتشارات
از React تا گوگل - قسمت سوم
مطلبی دیگر از این انتشارات
دومین رویداد جامعه ریاکت ایران در دانشگاه شهید بهشتی (26-2-98)
مطلبی دیگر از این انتشارات
نحوه ی استفاده از Context در React