آموزش کار کردن با Props و State و Hook در React یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم.
توسعه با React
ریاکت (React) یک کتابخانهی متنباز جاوااسکریپت است که توسط شرکت فیسبوک طراحی و توسعه یافته و امروزه یکی از اصلیترین ابزارهای ساخت رابط کاربری در دنیای توسعهی وب به شمار میرود. ریاکت بر پایهی فلسفهی کامپوننتمحور (Component-based) ساخته شده است؛ به این معنی که رابط کاربری به قطعات کوچکتر و مستقل تقسیم میشود که هرکدام وظیفهای مشخص دارند و میتوانند مجدداً در قسمتهای مختلف پروژه مورد استفاده قرار گیرند. این ویژگی به توسعهدهندگان اجازه میدهد تا پروژههایی ماژولار، قابل نگهداری و مقیاسپذیر ایجاد کنند. همچنین، ریاکت با استفاده از Virtual DOM باعث افزایش کارایی برنامه میشود؛ زیرا تنها بخشهایی از صفحه که تغییر کردهاند، مجدداً رندر میشوند. یکی دیگر از مزایای مهم ریاکت، امکان استفادهی آن در پروژههای مبتنی بر وب و موبایل از طریق React Native است.
پراپسها (Props) چیستند؟
پراپسها در ریاکت نقش ورودیهایی را دارند که از کامپوننتهای والد به کامپوننتهای فرزند منتقل میشوند. این پراپسها میتوانند داده، توابع یا حتی کامپوننتهای دیگر باشند. استفاده از پراپس یکی از روشهای اصلی برای مدیریت جریان دادهها در ریاکت است. پراپسها فقط خواندنی هستند، به این معنی که کامپوننت فرزند نمیتواند مقدار آنها را تغییر دهد؛ بلکه فقط میتواند از آنها استفاده کند. این ویژگی باعث میشود ساختار برنامه منسجمتر و قابل پیشبینیتر باشد. برای نمونه، اگر بخواهیم یک پیام خوشآمدگویی سفارشی نمایش دهیم، میتوانیم نام کاربر را به عنوان پراپ ارسال کنیم:
استیتها (State) چیستند؟
استیت، به معنای وضعیت داخلی یک کامپوننت، بخشی از دادههایی است که ممکن است در طول زمان تغییر کنند و تغییر آنها باعث بروزرسانی رابط کاربری میشود. برخلاف پراپسها که از بیرون به کامپوننت ارسال میشوند، استیت در درون خود کامپوننت نگهداری و مدیریت میشود. هر زمان که مقدار استیت تغییر کند، ریاکت بهطور خودکار کامپوننت مربوطه را رندر مجدد میکند تا تغییرات در UI منعکس شود. برای تعریف استیت در کامپوننتهای تابعی، از هوک useState استفاده میشود:
const [count, setCount] = useState(0);
در اینجا count مقدار فعلی استیت است و setCount تابعی است که برای تغییر مقدار آن استفاده میشود. برای مثال، میتوان با کلیک روی یک دکمه مقدار count را افزایش داد. استیتها برای پیادهسازی رفتارهای تعاملی مانند فرمها، شمارندهها، نمایش/مخفی کردن عناصر و غیره بسیار ضروری هستند. مدیریت صحیح استیت باعث میشود اپلیکیشن شما پاسخگو و واکنشگرا باقی بماند.
هوکها (Hooks) چه هستند؟
هوکها قابلیتهایی هستند که در نسخهی ۱۶.۸ ریاکت معرفی شدند و انقلابی در نحوهی ساخت کامپوننتهای تابعی به وجود آوردند. پیش از معرفی هوکها، استفاده از ویژگیهایی مانند استیت یا چرخهی حیات کامپوننت تنها در کامپوننتهای کلاسمحور ممکن بود. اما با معرفی هوکها، توسعهدهندگان میتوانند با استفاده از توابع ساده و بدون نیاز به تعریف کلاس، منطقهای پیچیده را در کامپوننتها پیادهسازی کنند. معروفترین و پرکاربردترین هوکها عبارتند از:
- کاربرد useState: برای تعریف و مدیریت استیت در کامپوننتهای تابعی
- کاربرد useEffect: برای اجرای عملیات جانبی مانند فراخوانی API، تنظیم تایمر، یا بهروزرسانی عنوان صفحه
- کاربرد useContext: برای دسترسی به مقادیر موجود در Context بدون نیاز به props drilling
-
- کاربرد useRef: برای ارجاع به عناصر DOM یا نگهداری مقادیر بدون رندر مجدد
در ادامه مثالی از استفاده از useEffect را مشاهده می کنیم.
useEffect(() => {
document.title = `count: ${count}`;
}, [count]);
در این مثال، هر بار که مقدار count تغییر کند، عنوان تب مرورگر بهروزرسانی میشود. استفاده از هوکها باعث میشود کدهای ریاکت سادهتر، قابل فهمتر و ماژولارتر باشند.
سرفصل آموزش ویدئویی مطالب کار کردن با Props و State و Hook در React
- قسمت ۱: مقدمهای بر Props در React
- قسمت ۲: معرفی useState
- قسمت ۳: معرفی useEffect
- قسمت ۴: انتقال State به کامپوننتهای بالاتر و قابلیت استفاده مجدد از کامپوننت
- قسمت ۵: حذف کتابها با filter() و Callback Props
- قسمت ۶: تغییر وضعیت خواندن کتاب با map() و رندرینگ شرطی
- قسمت ۷: فیلتر کردن و جستجوی کتابها در React
- قسمت ۸: تغییر تم روشن/تیره با useEffect و localStorage
- قسمت ۹: بازسازی به معماری کامپوننت ماژولار
- قسمت ۱۰: استفاده از Context API برای اشتراکگذاری حالت تم بهصورت سراسری
