💎 پشت پرده رندر مجدد یک کامپوننت در ریکت

⁉️ یکی از سوالات مهم مصاحبه استخدامی دوولوپر ریکت این است که چگونه ریکت متوجه می شود که باید کامپوننت رو مجدد رندر کنه؟!

همانطور که میدونید با تغییر props یا state یه کامپوننت مجدداً رندر میشه در هر بار تغییر یکی از این دو پارامتر، در پشت پرده متد object.is اجرا و مقدار قبلی و جدید state یا props با هم مقایسه میشود در صورتی که یکی از شروط زیر برقرار نبود، کامپوننت مجدداً رندر میشه.

🔸هر دو مقدار undefined یا null باشد
🔸هر دو مقدار true یا false باشد
🔸هر دو مقدار از نوع String و دارای کاراکتر های یکسان، طول برابر و ترتیتب یکسان باشد
🔸هر دو مقدار از نوع Number و دارای مقدار یکسان یا NaN باشد
🔸هر دو مقدار از نوع Object و دارای خانه یکسان در مموری باشد

بدین ترتیب اگر مقدار یک state یا props تغییر پیدا کرد ولی با مقدار قبلیش همچنان برابر بود رندر مجددی صورت نمیگیرد چون مقدار زیر true خواهد بود
Object.is(newState,PrevState) === true
اما نکته مهم اینه که اگر یک state یا props از نوع آبجکت باشد و مقدار آن تغییر پیدا کند، ولو با مقدار قبلیش برابر باشد، کامپوننت شما مجدداً رندر میشود چرا که مقدار جدید اون آبجکت در خانه جدیدی از حافظه ایجاد شده پس آخرین شرط از شروط بالا رو نقض و رندر مجدد صورت میگیره.

#ریکت #سوال_استخدامی

🌐 @pieceJS

💎 در مورد هوک useLayoutEffect در ریکت

هوک useLayoutEffect از جمله هوک های مهم ریکته (البته احتمالاً خیلی کم بهش احتیاج پیدا خواهید کرد) که عملکردی دقیقاً شبیه useEffect رو داره با این تفاوت که به صورت synchronize اجرا می شه. به عبارتی قبل از اینکه تغییرات دام، در صفحه چاپ بشود این هوک اجرا سپس تغییرات نمایش داده می شود.

نکته: در هوک useEffect ابتدا دام رندر و در صفحه چاپ می شد سپس این هوک اجرا می شد اما در اینجا دام رندر میشه هوک useLayoutEffect صدا زده میشه و پس از آن دام در صفحه چاپ میشه.

#ریکت #هوک
🌐 @pieceJS

💎 معضل دو بار رندر شدن useEffect در هنگام استفاده از StrickMode

شاید شما هم توجه شده باشید پس از انتشار ورژن 18 ریکت، StrickMode باعث رندر شدن دوباره useEffect میشد این موضوع خیلیا رو شاکی کرد اما حالا این مسئله معضل هست یا چی؟!
اولین موردی که باید بدانید این است که StrickMode فقط در نسخه Development پروژه اجرا میشه و در ورژن Production هیچ تاثیری نداره پس رندر مجدد useEffect رو تو این ورژن نداریم و هیچ جای نگرانی نیست 😉

⁉️ اما حالا چرا رندر مجدد میشه ؟
همانطور که میدونید StrickMode جهت بررسی خطاهای احتمالی مورد استفاده قرار میگیره زمانی که در نسخه Development پروژه رو ران می کنید StrickMode یکبار useEffect رو Mount میکنه، مجددا unMount میکنه که بررسی کنه آیا پس از unMount شدن، CleanUp صورت میگیره یا خیر. اگه صورت میگیره که مجدداً useEffect رو Mount میکنه.

🟡 نکته: در صورت unMount نکردن، امکان رخدادن خطای Memory Leak افزایش می یابد.

🌐 @pieceJS

#مثبت_برنامه_نویس
#معرفی_نرم_افزار
🟨 داکیومنت های آفلاین با نرم افزار Zeal


- از طریق 🔗 لینک وارد سایت Zeal بشید و برنامه Zeal رو دانلود کنید.
- بعد از دانلود و نصب، از طریق منوی
Tools > Docsets > Available
میتونید داکیومنت مربوط به زبان دلخواهتون رو یکبار برای همیشه دانلود و بصورت آفلاین استفاده کنید.


💬 البته نه فقط جاوا بلکه، داکیومنت هر زبونی که بخواید رو داره و میتونید برای همیشه بصورت آفلاین داشته باشید. :)

~موفق باشید❤️

☕️@PIECEJAVA

🟣 اگه احیانا داکیومنت مدنظرتون داخل Docset وجود نداشت(مثلا three.js یا... )، از طریق آدرس زیر:

https://zealusercontributions.herokuapp.com/

لینک یکی از پکیج های XML یا JSON مربوط به زبان رو کپی کنید و از بخش Docset از طریق گزینه Add Feed آدرس پکیج رو به برنامه بدید تا دانلود رو شروع کنه.

🌐 @pieceJS

💎 مدیا کوئری ها در جاوا اسکریپت

از مدیا کوئری ها برای بررسی سایز و اندازه طول و عرض صفحه نمایش مورد استفاده قرار میگیره و از اصلی ترین مواردیست که ریسپانسیویتی سایت بر آن استوار است و قطعاً اسمش رو در CSS شنیدید.
در جاوا اسکریپت هم میتونید از مدیا کوئری ها استفاده کنید.

⁉️ به چه صورت؟
تو کلاس window یه متدی داریم به نام matchMedia که میتونید سایز مد نظر صفحه رو به اون بدید و پاسخ رو به صورت آبجکت دریافت کنید.

💬 نکته مهم اینکه حتماً حداقل عرض رو باید درون پرانتز بنویسید.

#جاوا_اسکریپت #مدیا_کوئری

🌐 @pieceJS

💎 خلاصه ای از آفست ها در جاوا اسکریپت در قاب تصویر

تصویر بالا offset ها رو تو جاوا اسکریپت به طور کامل نشان داده که شاید نیازی به توضیح اضافه نداشته باشه.
اما اگه فکر میکنید یخورده نیاز به توضیح و مثال بیشتر دارید از طریق لینک زیر، کامل تر در این مورد بخونید

|مطالعه بیشتر|


🌐 @pieceJS

یه مثال خیلی باحال از call by value و call by reference😄

☕️ @PIECEJAVA

💎 اختصاص دادن Key به کامپوننت های رندر شده توسط حلقه ها در ریکت

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

|هر چیزی که باید در مورد Key Prop ها در ریکت بدانید|



#ریکت #key_props

🌐 @pieceJS

💎 ارور replaceAll is not a function !!!

با اینکه بیش از 1 سال است از آپدیت ES2021 میگذره اما هنوز برخی از همکاران به این ارور برخورد می کنند و دلیل آن هم عدم پشتیبانی بعضی از ورژن های یسری از مروگر ها از ES2021 یا حداقل عدم پشتیبانی کامل آن ها از آپدیت ES2021 است

🔸 به منظور حل این مشکل می تونید همچنان از متد String.prototype.replace استفاده کنید و از آنجایی که این متد فقط یک بار replace انجام میده (در واقع کل محتوا رو replace نمی کنه) میتونید از regex برای حل این مسئله استفاده کنید.

#جاوا_اسکریپت #رجکس #ES2021

🌐 @pieceJS

💎 نمایش تمامی خطا های برگشتی توسط Yup

شاید متوجه شده باشید زمانی که پکیج Yup داره فرمی رو اعتبار سنجی می کنه و به ارور میخوره فقط یک ارور رو برگشت میده در صورتی که فرم شما ممکنه شامل ارور های بیشتری باشه (مثلا ایمیل، سن و... نا معتبر باشه یا یوزر وارد نکرده باشه yup فقط میگه ایمیل نامعتبر است دیگه نمی نویسد که سن رو وارد نکردید و دیگر ارور ها).

🔸 برای حل این مسئله، مهم است بدونید که متد validate دو تا ورودی میگیره (که عموماً برخی از همکاران فقط یک ورودی بهش میدن) ورودی اول، مقادیر فرم هست که معمولاً به صورت آبجکت بهش میدیم و ورودی دوم، options هست که باید به صورت آبجکت داده شود. حالا اگه میخواید که تمامی ارور ها برگشت داده شود، به آپشن، ابجکت abortEarly: false رو بدید و در این صورت تمامی ارور ها برگشت داده میشود

💬 نکته مهم تر: از انجایی که ارور ها در (err)catch برگشت داده میشه، در این قسمت میتونید err.inner رو لاگ بگیرید و لیست ارور ها رو مشاهده کنید که متاسفانه به آبجکت inner خیلی کم پرداخته شده است.
#yup #اعتبارسنجی_فرم

🌐 @pieceJS

💎 معرفی نرم افزار یا ابزار RunJS

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

💬 نکته مهم: کد های شما با موتور v8 ران خواهد شد.

💡 پیشنهاد: اگه از کد ادیتور VSCode یا IDE پی اچ پی استورم استفاده می کنید پیشنهاد می کنم از اکستنشن Quokka استفاده کنید این اکستنشن همانند RunJS عمل میکنه با این تفاوت که روی خود IDE شما نصب میشه.

#معرفی_نرم_افزار #جاوااسکریپت


🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

🌐 @pieceJS

💎 تفاوت Shallow Copy و Deep Copy

یکی از مهم ترین مباحث جاوا اسکریپت که یادنگرفتن اون گاهاً موجب بروز خطا های لاجیکال خواهد شد و از اونجایی که خطا لاجیکال هست (یعنی نرم افزار بدون خطا کار میکنه ولی جوابی که میده اونی نیست که ما میخوایم) عیب یابیش نیاز به دانش عمیق جاوا اسکریپته و خلاصه کلی درد سر داره.🤯

فرض کنید یک آرایه داریم به نام myArray و قصد دارید ازش یه کپی بسازید به نام myArray2. معمولاً برای اینکه رفرنس کپی صورت نگیره، از Spread Operator استفاده می کنیم یعنی مینویسیم

 myArray2 = [...myArray] 

این شکل کپی کردن یکی از مصادیق Shallow Copy محسوب میشه هر چند که برای آرایه های ساده کار رو راه میندازه اما برای آرایه های تو در تو براتون دردسر بوجود میاره در واقع عناصر وجود خانه های تو در تو این آرایه ها با هم دارای یک رفرنس مشترک در حافظه هستند و با تغییر یکیشون، سایر آرایه های کپی گرفته شده هم تغییر می کنند.

اگه قصد دارید که از یک آرایه تو در تو کپی بگیرید باید Deep Copy انجام بدید و این عمل رو با سریالایز کردن آرایه (تبدیل داده های پیچیده مثل آرایه یا آبجکت به رشته) صورت میگیره به عبارتی باید از متد های JSON استفاده کنید و ابتدا آرایه رو به رشته سپس مجدداً parseش کنید. (در تصویر بالا نمونشو گذاشتم)

🟡 نکات اضافه
———
💬 اگه از کتابخونه lodash استفاده می کنید میتونید از پکیج lodash.clonedeep استفاده کنید
💬 اگه از lodash استفاده نمی کنید میتونید از پکیج just-clone استفاده کنید.
💬 اگه از توسعه دهندگان Angular هستید میتونید از angular.copy استفاده کنید.

#جاوااسکریپت #deep_copy #shallow_copy


🌐 @pieceJS

💎 معرفی وبسایت پرکاربرد openbase

وبسایت openbase.com یکی از پرکاربرد ترین مراجع آنلاین تو انتخاب پکیج مناسب برای انجام فعالیتی خاص محسوب میشه.
⁉️ فرض کنید قصد دارید یک پکیج برای راه اندازی Date Picker نصب کنید و از طرفی، میخواید بدونید که محبوب ترین پکیج برای این کار چیه؟!

🔆 برای همین وارد این وبسایت میشید، از قسمت سرچ اسم Date Picker رو مینویسید، سمت راست فیلد سرچ، زبان مورد نظرتون رو انتخاب و سرچ رو انجام میدید. این وبسایت 10 تا از محبوب ترین پکیج ها رو از نظر تعداد نصب و بازخورد کاربران رو براتون نمایش میده و به سادگی میتونید بهترین پکیج رو برای هر کاری پیدا کنید.

💬 زبان های پشتیبانی شده : Javascript, Swift, Python, Java, Go, Rust

💬 نکته مهم: اگر گاهاً اختلالی تو این سایت مشاهده کردید از ف.ل.تر شکن استفاده کنید.

#مثبت_برنامه_نویس #معرفی_وبسایت

🌐 @pieceJS

💎 آشنایی با ابزار Browserslist برای توسعه دهندگان جاوااسکریپت

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

در طول توسعه پروژه، ممکن است به جهت راحت کد زدن، یا کدنویسی تمیز و ... از برخی ویژگی های ورژن های جدید اکمااسکریپت استفاده کرده باشید از طرفی این نکته بسیار مهم است که بدانید به آن سرعتی که اکمااسکریپت آپدیت میشود، مرورگر ها آپدیت نمیشوند و قرار نیست تمام ویژگی های نسخه جدید اکما اسکریپت توسط تمام مرورگر ها پشتیبانی شود. به همین جهت با استفاده از browserslist تعیین می کنیم که این پروژه نوشته شده با توجه به فیچر های ES استفاده شده روی کدوم بروزر ها قابل پشتیبانی باشد.

💬 اجازه بدید یک مثال کاملاً مهم را برایتان بزنم...
ورژن 2015 اکمااسکریپت که اکثراً به نام ES6 میشناسیم و بسیار به مراتب مورد استفاده نیز قرار می دهیم توسط Opera Mini به هیچ عنوان پشتیبانی نمیشود (اپرا مینی یکی از بروزر های محبوب برخی از سیستم عامل های اندرویدی است) اینجاست که باید قبل از اینکه پروژه کار نکند یا به ایراد های جدی برخورد کند خودمان جلوی ران شدن آن را در این بروزر ها بگیریم و از کاربر بخواهیم که از بروزر های پشتیبانی شده استفاده کند.

پ.ن: برخی آموزش ها رو نمیشه به طور کامل تو کانال قرار داد برای همین سعی می کنم کاملش رو داخل سایت قرار بدم

|مطالعه بیشتر و آموزش استفاده|

🌐 @pieceJS

💎 اجرا شدن همزمان بخش فرانت با سرور با نوشتن npm start

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

🌟 با استفاده از ابزار concurretly می تونید به سادگی با یک بار نوشتن npm start توی ترمینال، بخش فرانت و بخش بک اند به صورت خودکار اجرا کنید.
❕ برای این منظور، این پکیج رو از npmjs دانلود کنید

npm i concurrently -g

سپس فایل package.json رو باز کنید تو قسمت script، مقدار پراپرتی start رو مانند تصویر بدید


🟡 توجه داشته باشید که در تصویر بالا مقادیر command1 arg و command2 arg همان دستوراتیه که شما میخواهید با یک بار npm start زدن اجرا بشه

💬 توضیح مثال درون عکس :
تو این مثال وقتی npm start میزنیم ابزار concurrently میاد ابتدا دستور react-script start رو اجرا کنه سپس به فولدر server بره (با دستور cd server) و در اون فولدر دستور npm start رو اجرا کنه و اینجوری میشه که هم فرانت و هم سرور با یک بار npm start نوشتن ران میشن :)

#جاوا_اسکریپت

🌐 @pieceJS

💎 حذف قسمت اعشاری یک عدد

جهت حذف قسمت اعشاری یک عدد بجای استفاده از متد Math.floor میتوانید از دو تا علامت مد قبل از آن عدد استفاده کنید (~~)

پ.ن: در منبعی ادعا شده بود که سرعت این روش از Math.floor بیشتر است اما بعید میبینم.


🌐 @pieceJS