برنامه نویسی 67 بازدید

در بخش قبلی این نوشته به توضیح پاره‌ای از مفاهیم عمیق React پرداختیم. در این نوشته تلاش خواهیم کرد به توضیح ادامه مفاهیم عمیق از جمله مواردی که در فهرست زیر ارائه شده‌اند بپردازیم.

  • فرم‌ها در ری‌اکت
  • ارجاع به یک عنصر DOM
  • رندرینگ سمت سرور
  • API زمینه (Context API)
  • کامپوننت‌های درجه بالا (Higher order components)
  • رندر Props
  • قلاب‌ها (Hooks)
  • افراز کد (Code splitting)

فرم‌ها در ری‌اکت

فرم‌ها یکی از معدود عناصر HTML هستند که به صورت پیش‌فرض تعامل‌پذیر هستند. فرم‌ها به این منظور طراحی شده‌اند که به کاربر امکان تعامل با صفحه را بدهند. در ادامه موارد استفاده رایج از فرم‌ها را ارائه کرده‌ایم:

  • جستجو
  • فرم تماس
  • فرم سبد خرید
  • فرم ورود و ثبت‌نام
  • و موارد دیگر

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

  • اگر داده‌ها از سوی DOM مدیریت شوند، ما آن‌ها را کامپوننت‌های «کنترل نشده» می‌نامیم.
  • اگر داده‌های از سوی کامپوننت‌ها مدیریت شوند، آن‌ها را کامپوننت‌های «کنترل شده» می‌نامیم.

همان طور که احتمالاً حدس می‌زنید، کامپوننت‌های کنترل شده آن چیزی هستند که در اغلب اوقات مورد استفاده قرار می‌گیرند. در این وضعیت State کامپوننت به جای DOM، منبع منفرد «حقیقت» و مبنای عمل ما است. برخی فیلدهای فرم مانند فیلد <“input type=”file> به دلیل نوع رفتارشان دارای ماهیت کنترل نشده هستند.

زمانی که تغییرات State یک عنصر در فیلد فرم از سوی کامپوننت مدیریت می‌شود، این تغییرات را با استفاده از خصوصیت onChane ردگیری می‌کنیم.

BIND

جهت تعیین State جدید، باید this را به متد handleChange متصل (bind) کنیم. در غیر این صورت this از درون متد قابل دسترسی نخواهد بود:

به طور مشابه باید از خصوصیت onSubmit برای فراخوانی متد handleSubmit در موارد تحویل فرم استفاده کنیم:

اعتبارسنجی

«اعتبارسنجی» (Validation) یک فرم از طریق متد handleChange ممکن است. در این مورد به مقدار قبلی و همچنین مقدار فعلی State دسترسی داریم. می‌توان State جدید را بررسی کرد و در صورتی که معتبر نباشد مقدار به‌روزرسانی شده را رد کرد. این موضوع باید به طریقی به اطلاع کاربر برسد.

فرم‌های HTML ناسازگار هستند. آن‌ها تاریخچه‌ای طولانی دارند. با این وجود ری‌اکت آن‌ها را برای ما سازگارتر ساخته است و می‌توان فیلدها را با استفاده از خصوصیت value دریافت و به‌روزرسانی کرد. در ادامه یک فیلد textarea را برای نمونه مشاهده می‌کنید:

وضعیت مشابهی در مورد تگ select وجود دارد:

ما قبلاً به فیلد <“input type=”file> اشاره کردیم. طرز کار آن اندکی متفاوت است.

در این حالت باید با انتساب خصوصیت ref به یک مشخصه تعریف شده در سازنده با ()React.createRef یک ارجاع به فیلد داشته باشیم و از آن برای دریافت مقدار آن در دستگیره رویداد استفاده کنیم:

این همان طرز کار کامپوننت‌های کنترل نشده است. در این وضعیت، State به جای خود کامپوننت در DOM ذخیره می‌شود. دقت کنید که ما از this.curriculum برای دسترسی به فایل آپلود شده استفاده کرده‌ایم و به state دست نزده‌ایم.

شاید با خود فکر کنید که به جز این مبانی مطرح شده باید کتابخانه‌ای وجود داشته باشد که مدیریت این موارد و خودکارسازی اعتبارسنجی، مدیریت خطا و موارد دیگر را بر عهده بگیرد. البته چنین کتابخانه‌ای وجود دارد و Formik (+) نام دارد.

ارجاع به یک عنصر DOM

ری‌اکت از این جهت که هنگام ساخت اپلیکیشن موجب انتزاع شما از DOM می‌شود، بسیار عالی است. اما اگر بخواهیم به عنصر DOM-ی که یک کامپوننت ری‌اکت نمایش می‌دهد دسترسی داشته باشیم چطور؟

در این موارد احتمالاً باید یک کتابخانه اضافه کنیم که به صورت مستقیم با DOM مانند یک کتابخانه chart تعامل داشته باشد و شاید برخی API-های DOM را فراخوانی کرده و روی یک عنصر فوکوس اضافه کند. دلیل شما هر چه که باشد، باید مطمئن شوید که هیچ راه دیگری برای این کار به جز دسترسی مستقیم وجود ندارد. در بخش JSX هر کامپوننت، می‌توان با استفاده از خصوصیت زیر، ارجاعی به عنصر DOM روی مشخصه کامپوننت اضافه کرد:

برای نمونه این کد را می‌توان روی یک عنصر button اضافه کرد:

در این جا button به یک مشخصه کامپوننت اشاره می‌کند که می‌تواند متعاقباً از سوی متدهای چرخه عمر کامپوننت یا متدهای دیگر برای تعامل با DOM مورد استفاده قرار گیرد:

در یک کامپوننت تابع نیز سازوکار مشابهی وجود دارد. کافی است از استفاده از this اجتناب کنید، چون به وهله‌ای از کامپوننت اشاره نمی‌کند و به جای آن از یک «مشخصه» (property) استفاده کنید:

رندرگیری سمت سرور

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

چرا باید بخواهیم از رندر سمت سرور استفاده کنیم؟

  • رندرگیری سمت سرور امکان افزایش سرعت بارگذاری صفحه که یکی از کلیدهای بهبود تجربه کاربری است را فراهم می‌سازد.
  • این امکان برای سئو بسیار مهم است، چون موتورهای جستجو نمی‌توانند اپلیکیشن‌هایی را که به صورت انحصاری در سمت کلاینت رندر می‌شوند به طرز مؤثری اندیس‌گذاری بکنند. علی‌رغم بهبودهای اخیری که در فرایند اندیس‌گذاری موتور جستجوی گوگل ایجاد شده است؛ اما موتورهای جستجوی دیگری نیز وجود دارند و گوگل نیز در انجام این کار چندان عالی عمل نمی‌کند. ضمناً گوگل به وب‌سایت‌هایی که سریع‌تر بارگذاری می‌شوند اهمیت بیشتری می‌دهد و رندر شدن در سمت کاربر موجب کندتر شدن سرعت بارگذاری صفحه می‌شود.
  • رندرگیری سمت سرور در مواردی که افراد صفحه‌ای از وب‌سایت را روی رسانه‌های اجتماعی به اشتراک می‌گذارند مناسب خواهد بود، زیرا می‌توان فراداده مورد نیاز شامل تصاویر، عنوان، توضیح و موارد دیگر که برای اشتراک مناسب‌تر صفحه لازم هستند را از سرور گرفت.

بدون وجود رندرگیری سمت سرور، تنها چیزی که سرور به کاربر ارسال می‌کند، یک صفحه HTML بدون هیچ متنی است و صرفاً شامل تگ‌های اسکریپت هستند که متعاقباً از سوی مرورگر کاربر برای رندر کردن اپلیکیشن مورد استفاده قرار می‌گیرند.

اپلیکیشن‌هایی که در سمت کلاینت رندر می‌شوند، پس از بارگذاری اولیه، در موارد استفاده بعدی عملکردی بسیار عالی دارند. رندرینگ سمت سرور به ما امکان می‌دهد که بتوانیم نقطه تعادل مناسبی بین اپلیکیشن‌های با رندر سمت سرور و اپلیکیشن‌های دارای رندر سمت کلاینت داشته باشیم. بدین ترتیب یک صفحه در سمت سرور تولید می‌شود؛ اما زمانی که در سمت کاربر بارگذاری شد، همه تعامل‌ها با صفحه در آن سمت مدیریت می‌شوند.

با این وجود رندرگیری سمت سرور معایبی نیز دارد:

  • تثبیت مفهوم رندرگیری سمت سرور کار نسبتاً آسانی است؛ اما پیچیدگی رندرگیری سمت سرور با افزایش پیچیدگی اپلیکیشن بالاتر می‌رود.
  • رندرگیری یک اپلیکیشن بزرگ در سمت سرور می‌تواند به منابع زیادی نیاز داشته باشد و در موارد وجود بار زیاد روی سرور، تجربه کُندی نسبت به رندرگیری سمت کاربر ارائه کند، چون با یک نقطه «تنگنای منفرد» (single bottleneck) مواجه هستیم.

مثالی ساده از رندرگیری سمت سرور یک اپلیکیشن ری‌اکت

تنظیمات رندرگیری سمت سرور ممکن است کاملاً پیچیده باشند و در اغلب راهنماها از همان ابتدا از Redux ،React Router و احتمالاً مفاهیم دیگر استفاده می‌شود. برای درک طرز کار رندرگیری سمت سرور، توضیح خود را از مبانی مقدماتی این مفهوم آغاز می‌کنیم.

برای پیاده‌سازی «SSR» (رندر گیری سمت سرور) در مراحل مقدماتی از Express استفاده می‌کنیم. دقت کنید که پیچیدگی SSR با افزایش پیچیدگی اپلیکیشن بالاتر می‌رود. در ادامه یک تنظیمات کمینه برای رندر کردن یک اپلیکیشن ساده ری‌اکت ارائه شده است. در مورد نیازهای پیچیده‌تر باید کار بیشتری انجام دهید و به کتابخانه‌های بیشتری برای ری‌اکت هم نیاز خواهید داشت. ما فرض می‌کنیم که شما یک اپلیکیشن ری‌اکت را با استفاده از create-react-app آغاز کرده‌اید. اگر تازه مطالعه این راهنما را آغاز کرده‌اید، می‌توانید یک اپلیکیشن جدید را با استفاده از npx create-react-app ssr نصب کنید.

در ترمینال به پوشه اصلی اپلیکیشن بروید و سپس دستور زیر را اجرا کنید:

npm install express

اکنون در دایرکتوری app خود مجموعه‌ای از پوشه‌ها دارید. یک پوشه جدید به نام server ایجاد کنید و سپس به درون آن رفته و فایلی به نام server.js بسازید.

با پیروی از قراردادهای مرسوم create-react-app، این اپلیکیشن در فایل src/App.js قرار دارد. ما قصد داریم این کامپوننت را بارگیری بکنیم و آن را با استفاده از ()ReactDOMServer.renderToString که از سوی react-dom عرضه شده است، در یک رشته رندر کنیم.

در این وضعیت، محتوای فایل build/index.html/. را دریافت می‌کنید و <div id=”root”></div> را جایگزین کنید. این یک تگ است که اپلیکیشن در آن به صورت پیش‌فرض به صورت زیر قلاب می‌شود:

Express

همه محتوای درون پوشه build به صورت موجود و استاتیک از سوی Express عرضه می‌شود.

اکنون در اپلیکیشن کلاینت و در فایل src/index.js به جای فراخوانی ()ReactDOM.render به صورت زیر:

متد ()ReactDOM.hydrate را فراخوانی کنید که مشابه همان است، اما این قابلیت اضافی را دارد که در زمان بارگیری React به «شنونده‌های رویداد» (event listeners) موجود در markup اتصال یابد:

Transpile کردن JSX

همه کد Node.js باید از سوی Babel، ترجمه شود، چون کد Node.js سمت سرور هیچ چیز در مورد JSX و همچنین ماژول‌های ES نمی‌داند. سه بسته زیر را نصب کنید:

ignore-styles یک ابزار Babel است که به این منظور استفاده می‌شود تا بگوییم باید فایل‌های CSS ایمپورت شده با استفاده از ساختار import نادیده گرفته شوند. در ادامه یک نقطه ورودی در فایل server/index.js ایجاد می‌کنیم:

اپلیکیشن React را Build می‌کنیم به طوری که پوشه build/ ایجاد شود:

npm run build

سپس دستور زیر را اجرا می‌کنیم:

node server/index.js

قبلاً گفتیم که این رویکرد ساده خواهد بود و واقعاً هم چنین است:

  • در این رویکرد تصاویر رندر شده در زمان استفاده از import-ها به درستی مدیریت نمی‌شوند، چون برای این منظور به Webpack نیاز داریم که به میزان زیادی بر پیچیدگی فرایند می‌افزاید.
  • این رویکرد به مدیریت فراداده هدر صفحه نمی‌پردازد و این مسئله برای سئو و مقاصد اشتراک روی رسانه‌ها ضروری است.

بنابراین گرچه مثال فوق برای توضیح استفاده از ()ReactDOMServer.renderToString و ReactDOM.hydrate برای اجرای رندرینگ سمت سرور مناسب است؛ اما برای کاربردهای واقعی چندان مناسب نیست.

رندرگیری سمت سرور با استفاده از کتابخانه

اجرای صحیح SSR کار دشواری است و React روش پیش‌فرضی برای پیاده‌سازی آن ندارد. هنوز در مورد این که آیا این همه دردسر، پیچیدگی و هزینه بالاسری در برابر مزیت‌هایش می‌ارزد یا نه بحث زیادی وجود دارد و برخی نیز استفاده از فناوری‌های جایگزین برای ارائه صفحه را پیشنهاد می‌کنند. با این که رندرگیری سمت سرور موضوع مهمی است؛ اما پیشنهاد ما این است که شما بیشتر روی کتابخانه‌های پیش‌ساخته و ابزارهایی که از ابتدا این موضوع را در ذهن خود دارند تکیه کنید. به طور خاص دو پروژه Next.js و Gatsby توصیه می‌شود که در ادامه این سری مقالات در مورد آن‌ها بیشتر خواهیم خواند.

API زمینه

API زمینه روشی عالی برای ارسال State درون اپلیکیشن بدون نیاز به استفاده از props است. این امکان به این منظور معرفی شده است که بتوان State را ارسال کرد و امکان به‌روزرسانی State را درون اپلیکیشن بدون نیاز به استفاده از props ایجاد کرد.

تیم ری‌اکت پیشنهاد می‌کنند که اگر قرار است چیزی صرفاً در چند سطح معدود درون اپلیکیشن ارسال شود، بهتر است همچنان از props استفاده کنیم، زیرا نسبت به API زمینه پیچیدگی کمتری دارد. در موارد زیادی API زمینه به ما امکان می‌دهد که از Redux اجتناب کنیم و موجب ساده‌سازی زیادی در اپلیکیشن می‌شود. همچنین باعث می‌شود در مورد طرز استفاده از React اطلاعات زیادی کسب کنیم.

طرز کار API زمینه چگونه است؟

یک زمینه (context) با استفاده از ()React.createContext ایجاد می‌کنیم که یک شیء زمینه را بازگشت می‌دهد:

سپس یک کامپوننت پوششی (wrapper component) می‌سازیم که یک کامپوننت Provider بازمی‌گرداند و همه کامپوننت‌هایی که قصد دارید از آن‌ها به زمینه دسترسی داشته باشید را به عنوان فرزند آن اضافه می‌کنید:

ما برای نام این کانتینر از Container استفاده کردیم، زیرا یک Provider سراسری است و می‌توانید با آن زمینه‌های کوچک‌تر نیز بسازید. درون یک کامپوننت که در یک Provider پیچیده شده است، از یک کامپوننت Consumer استفاده کنید تا بتوانید از یک زمینه بهره‌مند شوید:

همچنین می‌توانید تابع‌ها را به یک مقدار Provider ارسال کنید و این تابع‌ها از سوی مصرف‌کننده برای به‌روزرسانی State زمینه استفاده خواهند شد:

استفاده عملی از این state را می‌توانید در این Glitch (+) مشاهده کنید. می‌توان context–های متعددی را ایجاد کرد تا state روی کامپوننت‌های مختلف توزیع یابد. در این وضعیت، state از سوی هر کدام از کامپوننت‌ها قابل دسترسی است. هنگامی که از فایل‌های چندگانه استفاده می‌کنید، محتوا در یک فایل ایجاد می‌شود و در همه مکان‌هایی که مورد نیاز است مورد استفاده قرار می‌گیرد:

کامپوننت‌های درجه بالا

احتمالاً با مفهوم تابع‌های درجه بالا در جاوا اسکریپت آشنایی دارید. این‌ها تابع‌هایی هستند که تابع‌های دیگر را به عنوان آرگومان می‌پذیرند و/یا تابع‌هایی را بازگشت می‌دهند. دو نمونه از این تابع‌ها ()Array.map و ()Array.filter هستند. در React، ما این مفهوم را به کامپوننت‌ها بسط داده‌ایم و از این رو کامپوننت‌های درجه بالا (HOC) را داریم که در آن یک کامپوننت به عنوان ورودی، کامپوننت دیگری را می‌پذیرد یا یک کامپوننت را در خروجی ارائه می‌کند.

به طور کلی کامپوننت‌های درجه بالا امکان ایجاد کدی را می‌دهند که قابل ترکیب شدن و استفاده مجدد است و کپسوله‌سازی آن نیز بیشتر است. ما می‌توانیم از کامپوننت‌های درجه بالا برای افزودن متدها یا مشخصه‌ها به State یک کامپوننت و یا برای نمونه یک Redux استفاده کنیم. احتمالاً ممکن است بخواهید از کامپوننت‌های درجه بالا هنگام نیاز به بهینه‌سازی یک کامپوننت موجود، کار روی state یا props و یا رندر کردن markup استفاده کنید.

یک روش مرسوم برای نامگذاری کامپوننت درجه بالا استفاده از رشته with در ابتدای نام است، بنابراین اگر یک کامپوننت Button داشته باشید، کامپوننت درجه بالای آن باید به صورت withButton نامگذاری شود. در ادامه یک چنین کامپوننتی را ایجاد می‌کنیم. ساده‌ترین مثال از یک کامپوننت درجه بالا نمونه‌ای است که به سادگی کامپوننت را بدون هیچ تغییری بازگشت می‌دهد:

اگر بخواهیم این کامپوننت را کمی مفیدتر کنیم، می‌توانیم یک مشخصه به این دکمه اضافه کنیم تا علاوه بر همه مشخصه‌هایی که دارد، یک مشخصه color نیز پیدا بکند:

از این کامپوننت درجه بالا در یک JSX کامپوننت به صورت زیر می‌توان استفاده کرد:

در نهایت می‌توانیم کامپوننت WrappedButton را در JSX اپلیکیشن خود مورد استفاده قرار دهیم:

این یک مثال بسیار ساده است؛ اما امیدواریم شما را با مفهوم کامپوننت‌های درجه بالا پیش از به‌کارگیری آن‌ها در موارد پیچیده‌تر آشنا کرده باشد.

رندر کردن Props

یک الگوی رایج برای اشتراک state بین کامپوننت‌های مختلف استفاده از یک prop به نام children است. درون JSX یک کامپوننت می‌توان {this.props.children} را رندر کرد که به طور خودکار هر JSX ارسالی در کامپوننت والد را به صورت یکی از children تزریق می‌کند:

با این وجود، مشکلی در این کد وجود دارد، چون state کامپوننت والد نمی‌تواند از درون فرزند مورد دسترسی قرار گیرد. برای این که بتوان state را به اشتراک گذاشت، باید از یک کامپوننت رندر prop استفاده کنید و به جای ارسال کامپوننت‌ها به صورت فرزندان کامپوننت والد؛ یک تابع ارسال کنید که متعاقباً در {()this.props.children} اجرا شود. این تابع می‌تواند آرگومان‌هایی بپذیرد:

به جای استفاده از prop-ی با نام children که معنای کاملاً خاصی دارد، می‌توانیم از هر prop دیگری استفاده کنیم و از این رو می‌توانیم از این الگو در موارد متعدد روی کامپوننت یکسانی بهره بگیریم:

قلاب‌ها (Hooks)

قلاب یکی از ویژگی‌هایی است که در نسخه 16.7 ری‌اکت معرفی شده است و قرار است شیوه نوشتن اپلیکیشن‌های ری‌اکت را در آینده متحول کند.

پیش از معرفی مفهوم قلاب، برخی موارد کلیدی در کامپوننت‌ها تنها با استفاده از کامپوننت‌های کلاس قابل دسترسی بودند و از این رو باید State خاص خود را داشتند و از رویدادهای چرخه عمر استفاده می‌شد. کامپوننت‌های تابع سبک‌تر هستند و انعطاف‌پذیری بیشتری دارند؛ اما کارکردهای آن‌ها در این زمینه محدودتر بود.

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

دسترسی به State

با استفاده از API مربوط به ()useState، می‌توان یک متغیر state جدید ایجاد کرد و روشی برای تغییر دادن آن به دست آورد. ()useState مقدار اولیه آیتم state را پذیرفته و یک آرایه شامل متغیر state بازگشت می‌دهد و تابعی را برای تغییر دادن State فراخوانی می‌کند. از آنجا که این API یک آرایه بازگشت می‌دهد می‌توانیم از «تجزیه آرایه» (array destructuring) برای دسترسی به هر یک از آیتم‌های منفرد مانند زیر استفاده کنیم:

مثال عملی این کار چنین است:

می‌توانید هر تعداد فراخوانی ()useState که می‌خواهید اضافه کنید تا هر تعداد متغیر state که دوست دارید ایجاد کنید. تنها باید اطمینان حاصل کنید که آن را در سطح فوقانی یک کامپوننت؛ و نه در یک بلوک if یا هر چیز دیگر فراخوانی می‌کنید.

دسترسی به قلاب‌های چرخه عمر

یکی دیگر از ویژگی‌های مهم قلاب‌ها این است که به کامپوننت‌های تابع امکان دسترسی به قلاب‌های چرخه عمر را می‌دهند. با استفاده از کامپوننت کلاس می‌توان یک تابع روی رویدادهای componentDidMount ،componentWillUnmount و componentDidUpdate ثبت کرد. این مورد کاربردهای زیادی از مقدار دهلی اولیه متغیرها با فراخوانی API برای پاکسازی دارد.

قلاب‌ها یک API به نام ()useEffect ارائه می‌کنند که یک تابع را به عنوان آرگومان می‌پذیرد.

این تابع زمانی اجرا می‌شود که کامپوننت برای نخستین بار رندر شود و در همه رندرهای مجدد یا به‌روزرسانی‌های متعاقب نیز اجرا خواهد شد. ری‌اکت ابتدا DOM را به‌روزرسانی می‌کند و سپس هر تابعی که به ()useEffect ارسال شده باشد را فراخوانی می‌کند. همه این کارها بدون مسدودسازی رندرگیری UI و حتی مسدودسازی اجرای کد صورت می‌گیرد و از این نظر شباهتی به componentDidMount و componentDidUpdate ندارد و موجب می‌شود که اپلیکیشن سریع‌تر شود.

مثال

استفاده از پارامترهای ()useEffect

همان کار componentWillUnmount را می‌توان به صورت اختیاری با بازگشت دادن یک تابع از پارامتر ()useEffect به دست آورد:

()useEffect را می‌توان چندین بار فراخوانی کرد و این وضعیت برای جداسازی منطق تغییر نیافته مفید است.

از آنجا که تابع‌های ()useEffect در همه رندرهای مجدد/به‌روزرسانی‌ها اجرا می‌شوند، می‌توان به منظور افزایش عملکرد، به ری‌اکت گفت که از یک اجرا صرف‌نظر کند. این کار از طریق افزودن پارامتر دوم به صورت یک آرایه ممکن است که شامل فهرستی از متغیرهای State است که باید مورد مراقبت قرار گیرند. ری‌اکت تنها در صورتی موارد جانبی را مجدداً اجرا می‌کند که یکی از آیتم‌های موجود در این آرایه تغییر پیدا کنند.

به طور مشابه می‌توانیم به ری‌اکت بگوییم که تنها یک بار (در زمان فعال‌سازی) موارد جانبی را اجرا کند. این کار از طریق ارسال آرایه خالی زیر ممکن است:

()useEffect برای افزودن log-ها، دسترسی به API-های شخص ثالث و موارد دیگر بسیار مفید است.

مدیریت رویدادها در کامپوننت‌های تابع

پیش از معرفی قلاب‌ها شما یا باید از کامپوننت‌های کلاس استفاده می‌کردید و یا یک دستگیره رویداد را با استفاده از props ارسال می‌کردید. اینک می‌توان از API داخلی برای مدیریت رویدادها بهره گرفت:

هر پارامتری که درون تابع استفاده می‌شود باید از طریق یک پارامتر دوم در یک آرایه به ()useCallback ارسال شود:

فعال‌سازی ارتباط بین کامپوننت‌ها با استفاده از قلاب‌های سفارشی

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

شما با استفاده از قلاب‌های سفارشی، یک روش دیگر برای اشتراک state و منطق بین کامپوننت‌ها پیدا می‌کنید و بهبود زیادی در الگوهای رندر گیری props و کامپوننت‌های درجه بالا به دست می‌آید. این وضعیت بسیار عالی است؛ اما اینک معرفی امکان تعریف قلاب‌های سفارشی موجب شده که این مسئله در اغلب موارد دیگر موضوعیتی نداشته باشد.

چگونه یک قلاب سفارشی بسازیم؟

یک قلاب صرفاً تابعی است که به طور قراردادی با use آغاز می‌شود. این تابع می‌تواند تعداد دلخواهی از آرگومان‌ها را بپذیرد و از سوی دیگر هر چیزی را می‌تواند بازگشت دهد. در ادامه مثالی از یک قلاب سفارشی را می‌بینید:

همچنین یک مثال دیگر به صورت زیر است:

شما می‌توانید در کامپوننت‌های خود از قلاب به صورت زیر استفاده کنید:

این که دقیقاً در چه مواردی باید به جای تابع‌های معمولی از قلاب استفاده کرد، بر اساس موارد استفاده تعیین می‌شود و این موضوعی است که برحسب تجربه می‌توان در مورد آن تصمیم‌گیری کرد.

افراز کد

اپلیکیشن‌های مدرن جاوا اسکریپت بر حسب اندازه بسته می‌توانند کاملاً بزرگ باشند. بدیهی است که ما نمی‌خواهیم کاربرانمان صرفاً برای بارگذاری صفحه اول، یک بسته 1 مگابایتی جاوا اسکریپت، یعنی کد اپلیکیشن را به همراه کتابخانه‌هایش دانلود کنند. اما این دقیقاً همان وضعیتی است که هنگام ارسال یک وب اپلیکیشن مدرن ساخته شده با Webpack رخ می‌دهد.

این بسته‌ها شامل کدی هستند که شاید هرگز اجرا نشوند زیرا کاربر در صفحه ورود متوقف شود و هرگز بقیه اپلیکیشن را نبیند. افراز کد در عمل موجب می‌شود که کدهای جاوا اسکریپت صرفاً در زمانی بارگذاری شوند که مورد نیاز هستند. این امر موجب بهبود موارد زیر می‌شود:

  • عملکرد اپلیکیشن
  • تأثیر اپلیکیشن روی حافظه بهبود می‌یابد و از این رو مصرف باتری روی دستگاه‌های موبایل بهینه می‌شود.
  • اندازه پهنای باند مصرفی برای دانلود اپلیکیشن کاهش می‌یابد.

ری‌اکت نسخه 16.6.0 در اکتبر 2018 منتشر شده است و در آن روش جدیدی برای اجرای افراز کد به نام React.lazy و Suspense معرفی شده است که می‌تواند به جای همه ابزارها یا کتابخانه‌هایی که قبلاً استفاده می‌شد، قرار گیرد. React.lazy و Suspense یک روش عالی برای بارگذاری با تأخیر یک «وابستگی» (dependency)، معرفی می‌کنند و در این وضعیت وابستگی موصوف، تنها در زمانی بارگذاری می‌شود که مورد نیاز باشد.

React.lazy

توضیح خود را با React.lazy آغاز می‌کنیم. شما باید از آن برای ایمپورت کردن هر کامپوننت استفاده کنید:

Suspense

کامپوننت ToDoList به صورت دینامیک به محض این که موجود شود به خروجی اضافه می‌شود. Webpack یک بسته جداگانه برای آن می‌سازد و در موارد نیاز وظیفه بارگذاری آن را بر عهده می‌گیرد. Suspense کامپوننتی است که می‌توان برای قرار دادن هر کامپوننتی که قرار است با تأخیر بارگذاری شود، مورد استفاده قرار داد:

این کامپوننت وظیفه مدیریت خروجی را در مواردی که کامپوننت به صورت بارگذاری با تأخیر واکشی و رندر می‌شود بر عهده دارد. از prop آن به نام fallback می‌توان برای ارائه برخی کدهای JSX یا یک خروجی کامپوننت استفاده کرد:

همه این موارد به خوبی به همراه React Router کار می‌کنند:

بدین ترتیب به پایان فصل چهارم از راهنمای جامع React می‌رسیم. در فصل بعدی این راهنما به معرفی نمونه‌های عملی از کدهای ری‌اکت خواهیم پرداخت، پس با ما همراه باشید.

برای مطالعه بخش پنجم این مجموعه مطلب روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *