آپدیت جدید ری اکت(React) به نسخه 18 ، آیا آپدیت بزرگی در راه است ؟

Pouriya Babaali — Sun, 13 Jun 2021 20:53:52 +0430

بعد از آپدیت ری اکت به نسخه 17 و اضافه نشدن هیچ قابلیت جدیدی به ری اکت 17 بسیاری از توسعه دهندگان این لایبرری جذاب رو مایوس کرد ! اونا فقط جز چنتا ایمپرومنت ویژگی جدیدی رو از ری اکت 17 ندیدن ! بد تر از همه این بود که ری اکت 17 بعد از دو سال و نیم که از ریلیز شدن نسخه 16 و اضافه شدن ویژگی های جذاب هوک میگذشت ، ریلیز شد و حسابی باعث کلافه شدن دولوپرای ری اکت شد ! از طرفی نکست جی اس هم که خودش رو به یک فریم ورک تمام عیار تبدیل کرده بود این یاس رو تشدید میکرد ! دولوپرای ری اکت میدیدن که هروز یه ایمپرومنت جدید برای نکست میاد ، توبیاس کوپرز (فوندر وب پک ) به تیم نکست اضافه میشه ! کلی ایمپرومنت جدید برای نمایش عکس و فونت و سئو دارند ! کم کم اونایی که مجاب نشده بودند تا الان رو هم مجاب به این کوچ پر هزینه کرد ! و اما برگ برنده ری اکت برای خاموش شدن اینهمه اعتقاد قبل از کریسمس اتفاق افتاد و اونا با رسانه ای کردن قابلیت server component که چیزی شبیه به ssr با قابلیت کئوری مستقیم روی دیتابیس بود رو اعلام کردند و اجرایی کردنش رو به بعد کریسمس موکول کردند ! این قضیه تا حد زیادی آب روی آتیشی بود که تونست دولوپرای ری اکت راضی نگه داره !حدود یک ماه پیش نکست جی اس اعلام کرد که قراره کنفرانسی رو به رسم عادت سال گذشته اش به همراه تیم گوگل برگزار کنه و این کنفرانس 15 June برگزار میشه و قبلش باید از داخل سایتش تیکت بگیرید تا بهتون اجازه حضور در جلسه شونو بده ! درست 3 روز قبل از این اتفاق یعنی درست امروز 12 june ، ری اکت خیلی بی سر صدا از لانچ شدن نسخه 18 آلفای ری اکت پرده برداشت ! اونا اعلام کردند که خیلی تغییرات اساسی رو توی کدبیس ری اکت دادن و قراره خیلی تغییرات و ایمپرومنت های باحالی براش تو ماه آینده بیاد ! اونا اینشکلی زمان بندی لانچ نسخه 18 رو اعلام کردند :زمانی لانچ ری اکت نسخه 18در نهایت چیزی که مشخصه میتونیم تا اخر سال میلادی امسال ری اکت 18 نسخه نهایی رو داشته باشیم !ری اکت اعلام کرد که برای ادامه کار یه سری گروه های کاری تشکیل داده که دولوپرا میتونن باهم دیگه راجب نسخه 18 بحث کنند و ری اکت از این موارد فید بک بگیره ! و حالا چطور میتونیم ری اکت نسخه جدید آلفا رو نصب کنیم ؟// for react-alpha npm install react@alpha // for react-dom alpha npm install react-dom@alphaبا کامند های بالا میتونین ری اکت پروژه اتون رو به نسخه آزمایشی 18 ارتقا بدین ! راستی ری اکت معتقده آپدیت ری اکت اندازه یه بعد از ظهر یک روز ازتون وقت میگیریه و خیلی تغییرات اساسی تو کد بیستون نیاز نیست بدید بر خلاف تغییرات ری اکت 16 ! و حالا تغییرات اساسی ری اکت در نسخه پیش رو چیست ؟اولین و مهمترین تغییر ری اکت در کدبیس اش اتفاق افتاده ! و درست در جایی که کامپوننت ها شروع به ری رندر شدن میکنند ! حتما دلایل ری رندر شدن یه کامپوننت رو میدونین که یکیش setstate شدن استیت هست تغییری مهمی که ایجاد شده اینه که دیگر کامپوننت ها از بالا به پایین رندر نمیشن ! toptobottom rendering و در عوض قابلیت جدیدی اضافه شده که بهش میگن concurrency rendering یا رندر همزمان ! این قابلیت چیه و چیکار میکنه ؟تا ری اکت 17 اتفاقی که می افتاد رو در پاراگراف قبلی توضیح دادم تمام کامپوننت ها بعد از ری رندر از بالا به پایین رندر میشدن ! ولی خب همین باعث یه سری ساید افکت های خیلی فجیعی میشد که به قول ری اکت کلی اییشو براش داشتن ، هر روز که روی بعضی کد ها و بعضی ساختار ها باعث ایجاد مشکل میشده مثلا فرض کنین یک سایت با کلی کامپوننت و همزمان بخاطر یه اینپوت همه از بالا به پایین رندر میشدن این عملیات مکرر باعث ایجاد لگ در کامپوننت های دیگ میشد ! که ری اکت مجاب کرد Memo رو در اون زمان اضافه کنه ولی واقعیتی که بود ری اکت رو مجاب کرد که برای حل این مسئله یه راه حل بهتری رو بده ، برای همین یه تیم روی این قابلیت experimental کار کردند و حتی براش داخل خود داکیومنت ری اکت هم داکیومنت کامل نوشتن تا کم کم اونو تو نسخه 18 اضافه اش کنند ! این تغییر اساسی در کد بیس ری اکت باعث شد تا اونا دستشون برای اضافه کردن قابلیت های بیشتر و جذاب تر باز بشه !چگونه این قابلیت را فعال کنیم ؟برای فعال کردن این قابلیت در ری اکت نیاز نیست تغییرات زیادی در کدمون ایجاد کنیم ! صرفا باید در index.js یه سری تغییرات در کدمون بدیم ! به طور مثال ما قبلا این شکلی کامپوننت app رو به div با آیدی روت اپند میکردیم !import React from 'react'; import ReactDOM from 'react-dom'; const container = document.getElementById('root') ReactDOM.render(, container);و حالا تغییرات ما در ری اکت 18 اینچنین خواهد بود !import React from 'react'; import ReactDOM from 'react-dom'; import App from 'App'; const container = document.getEleementById('root') const root = ReactDOM.createRoot(container) root.render()با استفاده از این تغییر ما قابلیت concurrency Rendering رو فعال میکنیم ! و میتونیم از قابلیت های جذابش استفاده کنیم !اما این تمام کار نیست ! ما با تغییرات این بخش میتوانیم تغییرات دیگ ای رو هم اعمال کنیم :فعال کردن قابلیت hydrate : import ReactDOM from ‘react-dom’; import App from 'App'; const container = document.getElementById('root'); const root = ReactDOM.createRoot(container, { hydrate: true }); root.render();با اضافه کردن این متغیر میتوانیم این قابلیت جدید را به ری اکت اضافه کنیم ولی این قابلیت دقیقا برای ما چه کاری رو انجام میده ؟بزارید یک مثال از عملکرد Next js بزنیم !همانگونه که در تصویر میبینید برای ساخته شدن یک صفحه توسط نکست جی اس 4 مرحله طی میشودمرحله اول : تمامی صفحات ssr در ری اکت در زمان بیلد next js یکبار pre generate (یک غذای نیمه اماده رو تصور کنید ) میشوند ! زمانی که یوزر ریکوست برای صفحه ای میدهد آن صفحه سمت سرور کاملا ساخته میشود و با محتوای مورد نظر ما پر میشود !مرحله دو : صفحه سمت مرورگر فرستاده میشود و نمایش میدهد ، همزمان js های مورد نیاز نیست دانلود میشودمرحله سه : react به کانتنت ما تزریق یا hydrate میشود ! ( به این علت که ری اکت برای سرور به علت سر و کار داشتن با Dom که مستقیما مربوط به مرورگر است بیگانه است !) برای همین ما بعد از ساختن صفحات برای اینکه بتوانیم از قابلیت های ری اکت استفاده کنیم باید آن را به محتوایمان تزریق کنیم ( البته این حرکات رو نکست برامون میزنه)مرحله 4: نمایش کانتنت و محتوای ما به همراه react ! حالا ری اکت با hydrate چیکار میکنه ؟سال 2017 ، issue در گیت هاب ری اکت ثبت شد با این مضمون : با مثالی که زده کاملا متوجه مشکل میشید ! فرض کنید ما یه همچین JSX ای داریم :

و بعد میخواهیم این کار رو انجام بدیم :ReactDOM.render(

App

, document.getElementById('container') )خروجی ای که میگیریم این هست

App

شاید فک کنین چه باگ بدی ولی واقعا این باگ نیست ، ری اکت داره کارشو درست انجام میده ، فقط برای SSR شدنش خیلی باید حرفه ای عمل کنید ! برای همین بود که خیلیا از نکست استفاده میکردند !اتفاقی که اینجا میوفته یه دلیل خیلی ساده داره و اونم اینه که ری اکت میاد دو طرف مقایسه میکنه و چون ری اکت attribute هارو ضمیمه نمیکنه ( فارسی patch) برای همین اصلا براش مهم نیست اون کلاسش یه چیز دیگس این یه چیز دیگ با خود المنت کار داره ! میگه خب اونجا یه div میبینم اینورم div میبینم فقط تفاوتشون یه span عه پس اضافه اش میکنم به dom !همین اتفاق خیلی ساده میتونه خراب کاری زیادی رو سمت server ایجاد کنه چون وقتی کانتنت شما آمادست ! ری اکت رو اگر با reactdom.render اگر رندر کنین این به جای تزریق درست و جایگزینی مناسب این اتفاق عجیب براتون رقم میزنه و بعدش میگید ری اکت چقد بده ! ولی خب در عوض در این نسخه با اضافه کردن اون متغیر تمامی این اتفاقات درست میشه و اگرم همچین اتفاقی بیوفته طبق ادعای یکی از اعضای core تیم ری اکت پیام وارنینگ در کنسول براتون نمایش داده میشه ! 2. ارتقا render callbackتغییرات زیادی در این بخش شاهد نیستیم ولی دونستنش خالی از لطف نیست ! ری اکت قبلا بهمون اجازه میداد بتونیم بعد از رندر شدن همه کامپوننت ها ، کال بکی رو کال کنیم ! به طور مثال :import React from 'react'; import ReactDOM from 'react-dom'; import App from 'App' const container = document.getElementById('root') ReactDOM.render(, container, function(){ console.log('render only after initial component rendering') }) console.log('render at very last')حالا تغییری که در این قسمت شاهدش هستیم این هست که میتوانیم برای کال بک در نسخه 18 از requestIdleCallbacksetTimeOutاستفاده کنیم ! 3. UseTransitionدر نسخه جدید ری اکت دو هوک جدید تا الان قرار است که به ری اکت اضافه بشه اولین هوک usetransition است ، از قابلیت های این هوک با استناد به داکیومنت ری اکت این مورد اعلام شده است که which allows you “to tell React which updates are urgent, and which are not”.بله این هوک باشعور میتونه تشخیص بده که کدوم آپدیت از اون یکی اهمیتش بالاتره و اول بره اونو انجام بده !!اینجوری میشه برداشت کرد وقتی یه صفحه پر از کامپوننت داریم که مثلا یه سرچ اینپوت داریم که با تایپ کردن داخلش realtime دیتا فچ میشه و به یوزر نشون داده میشه و هر بار با تایپ کردن چون در پست زمینه ست استیت اتفاق می افته باعث ری رندر شدن همه این کامپوننت ها میشه و باعث ایجاد لگ در کل صفحه میشه و اعصاب یوزرا رو خرد میکنه ! طریقه استفاده از این هوک جذاب به این شکل هستش :import {startTransition} from 'react'; //ضروری است: Update input value as type setInputValue(input); startTransition(()=>{ //در وهله بعدی اجرا میشود: Show the search results setSearchQuery(input) });این قابلیت دقیقا باعث این میشه که کد ما آپدیت ترین استیت رو دریافت بکنه و از دریافت کرده استیت هایی که کاربر تایپشون کرده و بدرد نمیخورده خودداری بشه ! واقعا فوق العادست ! این هوک بیشتر برای دیتا فچ ، محاسبات سنگین و کارایی که نیاز به پردازش داره و زمان میبره میخوره ولی خب مواردی که ضرور هست رو باید خارج از این هوک بنویسیم مثل مثال بالا که اول ست استیت سرچ انجام شده و در پس زمینه داره فچ دیتا رو بر اساس اون استیت انجام میده !اساس این آپدیت کلا بر موضوع smooth rendering هستش یعنی اینکه همه چیز باید کاملا در اتقان صنع و در آرامش اتفاق بیوفته نباید ری رندر های متوالی باعث ایجاد فلاش یا لگ بشه و یوزر بخواد اذیت کنه !4.Strict Effectsقابلیتی در ری اکت و کلیت در زبان جاوا اسکریپت وجود داره به اسم strict mode ، کاری که این مود انجام میده رو با عنایت به داکیومنت ری اکت این شکلی میشه تعریف کردیک ابزاریه که اشتباهات کد زنی ما بهمون نشون بده و نزاره اپ کامپایل بشه تا زمانی که اون موارد درست شده و چون زبان جاوا اسکریپت به خودیه خود تا زمان کامپایل شدن هیچ خطایی به کاربر نشون نمیده این مود به ما کمک میکنه دیباگ کنیم کدمون رو و خب دقیقا داخل ری اکت هم فقط روی مود دولوپمنت اکتیو میشه و درست مثه تگ فرگمنت هیچ خروجی ui ای نداره !حالا Strict Effects چیکار میکنه برامون ؟این مود در strict mode میتونه فعال بشه و تمامی ساید افکت های اپلیکیشن ما رو بررسی کنه و خب عمده ساید افکت ها رو هم useeffect برای ری اکت ایجاد میکنه و باهاش میتونیم کلی کار باحال انجام بدیم ولی خب عملکرد این مود اینشکلیه که ساید افکت ها رو دو بار اجرا میکنه تا مطمین بشه ساید افکت خطرناکی برای اپتون پیش نمیاد ! درست مثه همون error معروف ، که وقتی بیش از اندازه set state صورت میگیره میبینمش اینم دقیقا وقتی ساید افکت در حسابی کد زده نشه بهمون خطا میده و خب میتونم بگم کمک خیلی خوبی میتونه بهمون بکنه ! قبل از این داستانا eslint پلاگینی برای ری اکت داده بود که به جرئت خوده منو خیلی جاها کمک میکرد مخصوصا موقع دپندنسی گذاشتن برای useeffect و پیشنهادم اینه فلن ازش استفاده کنید تا این ری اکت جدیده بیاد !! :)5. بهبود حالت SSRاین مورد خیلی بیشتر توی hydrate توضیح دادیم ولی خب به طور خلاصه فهمیدیم نکست جی اس چیکار میکنه اول کانتنت ما رو میسازه بعد جاوا اسکریپت رو لود میکنه بعد ری اکت رو به کانتنت ما تزریق میکنه ولی خب با همه خوبیاش یه ایراد بزرگ داره و اونم اینه تا زمانی که کانتنت لود شده سمت ما و هنوز جاوا اسکریپت و ری اکت بهش تزریق نشده ، صفحه ما با اولین سایت جهان وب تفاوتی نداره ! (شوخی) یعنی هیچ قابلیتی نداره هیچ کاریم باهاش نمیتونیم بکنیم و این مورد زمانی خودشو نشون میده که اینترنت ما خیلی ضعیفه و واقعا اعصاب کاربرا رو میتونه خرد بکنه ! اما خب ری اکت همینجوری ننشسته و براش برنامه ویژه داره !!2 پلن برای ارتقا SSR در ری اکت 18 برنامه ریزی شده !Streaming HTML (یا استریم کردن صفحه html)تصوری که از استریم کردن داریم یعنی به جای اینکه کل محتوا یهو بیاد سمتمون به شکل چانک چانک و کوچک کوچک بیاد تا زمان لود کامل سایت اولا یوزر یه چیزی داخل سایت ببینه و هم از نظر سئو بتونیم Time To Intract مون رو بیاریم پایین و بهبود سئو پیدا کنیم ! این اتفاقم دقیقا همینو برامون رقم میزنه ، قبلنا برای اینکه در CSR بتونیم یک کامپوننت رو وابسته به لودش توسط یوزر کنیم یعنی اینکه تا زمانی که یوزر سمتش نرفته یا کلیک نکرده لود نشه از LAZY استفاده میکردیم که بهش میگفتیم Code spiliting و همین امر در نکست جی با پکیج loadable اتفاق افتاده با این تفاوت که code spiliting نکست به شکل خودکار اتفاق میوفته و نیازی نیست ما دستی این عملیات انجام بدیم ولی خب ری اکت برای این مورد هم برنامه داره ! شما در lazy به کامپوننت suspense دسترسی دارید که میتونید تا زمان لود کامل کامپوننت به یوزر لودینگی نشون بدیم ولی خب همه این داستانا تا همین الان فقط سمت کاربر قابل پیاده سازی بود ! ولی الان یه خبر خوب دارم و اونم اینه تمام این اتفاقات سمت سرور نیز اتفاق میوفته یعنی شما فقط اون کامپوننتی که نیاز دارید براتون نمایش داده میشه .برای استفاده ازش اینشکلی کد میزنیم :

}> در اینجا کامپوننت article لود میشه ولی منتظر کامنت نمیمونه تا زمانی که خود کامنت توسط استریم شدن html ساخته بشه و اضافه بشه ، تو این فاصله یوزر میتونه به کامپوننت مقاله دسترسی داشته باشه !!!2.Selective hydrationپلن دوم ری اکت برای بهبود SSR ، اینه که هیچ کامپوننتی لنگ اون یکی کامپوننت نمیمونه تا صفحه جنریت بشه ! هر کامپوننتی که آماده بشه و کانتنت بهش برسه شروع میشه به هیدریت شدن توسط ری اکت و هیدریت شدن فقط یکبار اتفاق نمیوفته ! حتی انقدر این قسمت رو با وسواس پیش بردن که اگر یوزر اول به جای خاصی کلیک کنه یا اسکرولش رو قسمت خاصی باشه اول اون قسمت هیدریت میشه و ساخته میشه و بعد بقیه قسمتا !!! این مورد خیلی عجیب و خیلی فوق العادست !5. Suspense List قابلیت بعدی ری اکت لیست هایی هستند که شما میتونین به وسیله اون ها تعیین کنین که رندر شدن کامپوننت به چه شکل اتفاق بیوفته ! خب این یعنی چی؟ یعنی اینکه قبلا هیچ کنترلی رو کامپوننت هامون نداشتیم و هر کدوم زودتر از اون یکی تو هیج نظم و ترتیبی به محض گرفتن دیتا فچ میشدن ولی حالا با این قابلیت میتونیم تعیین کنیم که به چه نحوی قراره لود بشن به سه حالت دسته بندی میشن : همزمان با هم لود شن ، از اول لیست به اخر ، از اخر به اول لیست }> }> reveal order سه تا پراپ میگیره forwardsbackwardstogether که همینجور که از معنیش مشخصه اگر به ترتیب از اول به اخر باشه میشه فوروارد اگر برعکسش باشه میشه بکوارد و اگر باهم دیگه رندر صورت بگیره میشه together !6.useDeferredValueو در نهایت آخرین ویژگی که دومین هوکی هست که به این نسخه قرار بوده اضافه بشه همین هوک هستش ولی خب اگر لغوی معنیش کنیم به تعلل یا مکث یا معوق میرسیم و دقیقا کارشم همینه میتونه هر چیزی که بهش پاس میدین رو با تعویقی که خودتون براش تعیین میکنین بهتون پاس بده اینجوری میتونین بازهم استیت های بدرد نخوری که یوزر موقع تایپ کردن یا سرچ کردن مینویسه رو الک کنین ، همین ویرگول تصور کنین وقتی متنی مینویسین براتون میزنه در حال ذخیره ... ، حالا ویرگول وقتی ری اکت آپدیت بشه میتونه اولین نفر برای استفاده از این قابلیت باشه ، مثلا تعیین کنه استیت یوزر با تعلل 10 ثانیه یا 15 ثانیه اپدیت بشه !! اینجوری نیاز نیست مکرر برای آپدیت متن من ریکوست بزنه به سرور بیچارش !!استفاده از این قابلیت اینشکلیهfunction App() { const [text, setText] = useState(""); const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); return (

); }اون timeout که میگیره اون مقادر تعلل مورد نظر ماست ! بله بلاخره بعد از این توضیحات مفصل رسیدیم به انتهای مقاله ! اگر این مقاله رو دست داشتین لایک کنین و نظراتتون رو کامنت کنین برام ، نظرات و لایک هاتون باعث افتخار بنده است و خستگی ام این مدلی در میره ! منابعی که برای نوشتن مقاله استفاده شد :https://chan.dev/posts/concurrent-mode-is-dead/https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apjhttps://github.com/reactwg/react-18/discussions/4https://github.com/reactwg/react-18/discussions/37https://dev.to/workshub/react-18-is-here-what-s-new-ah4https://dev.to/muditdev/what-s-new-in-react-18-32m4در نهایت اگر نیاز هست با من ارتباط بگیرید میتونین از لینکدین بهم پیام بدین :https://www.linkedin.com/in/pouriya-babaali-2381661b5/

آپدیت جدید NextJs(نکست جی اس) این غول دوست داشتنی

Pouriya Babaali — Sat, 08 May 2021 23:53:11 +0430

بروز رسانی جدید نکست جی اس ، که حدودا کمتر از یک هفته است اعمال شده تغییرات جالبی رو برای این غول دوست داشتنی رقم زده ! نکست در نسخه 10.02 که به تازگی ریلیز شده ، خیال توسعه دهنده هاشو از کانفیگ وب پک 5 راحت کرده و بالاخره بعد از حدود 6 ماه از ریلیز شدن وب پک 5 ، رضایت داد که این مایگریشن رو انجام بده و از نسخه 10.01 به سمت وب پک 5 حرکت کرد و در آخرین تغییرات خودش اعلام کرده که اگر تنظیمات خیلی خاصی روی next.config.js خودتون انجام نداده باشید خیلی راحت از قابلیتای جدید و جذاب وب پک 5 که بیشترش تو بحث پرفورمنس و حذف و جایگزینی چندین پلاگین built-In خود وب پک بوده رو شامل میشه !این غول دوست داشتنی تغییرات عمده ای رو از نسخه 10 به بعد به خودش دید که خیلیاتون ازش خبر دارید شاید یکی از جذابتریناش اضافه شدن کامپوننت Image و مبحث بسیار جذاب و شیرین Lazy Loading در بحث تصاویر که خیلی از توسعه دهنده های فرانت به چالش میکشه و خیلی براشون جذابه که این مدل رو روی سایتشون اعمال کنند ، پیش تر مجبور بودند به شکل دستی با کد نویسی و شاید حساب کردن OffsetTop و یه سری از Event های تصاویر یا به قول بعضی از دوستان اضافه کردن اتریبیوت Lazy به تگ htmlاین قابلیت به هر نحوی که شده داخل سایتشون اعمال کنند ولی خب نکست در آپدیت نسخه 10 اش این قابلیت اضافه کرد و کار با تصاویر خیلی خیلی راحت کرد ، تصاویر در مرورگر هایی که WEBP ساپورت میکنند به شکل webp در میان و با پراپ quality به شکل درصد میتونین اعلام کنین که چقدر براتون کیفیتشو بیاره پایین که این واقعا تو بحث پرفورمنس فوق العادست ! من خودم عکس هایی که حجم 2 مگ داشتند رو تست کردم و کیفیتش تا 100 کیلوبایت کاهش میداد و با این تکنیک پرفورمنس خیلی خوبی ازش میشد گرفت !جدا از نسخه 10 ، نسخه جدید نکست جی اس قابلیت های زیر رو به نکست اضافه کرده که میتونه تغییرات مثبتی در جهت بهبود پرفورمنس نکست جی اس تلقی بشه ! اضافه شدن یک کش سیستم که باعث میشه فقط فایل هایی که تغییر کردن مجدد بیلد بشن و دیگه نیازی نیست همه فایلا یه باره از اول بیلد بشن ( که واقعا میتونم بگم از بحث زمانی یکم شاید اذیت میکرد و وقت گیر بود) ، طبق ادعا نکست تا 63 درصد بهبود داخل بیلد هاش انجام شده که خب رقم قابل توجهیه ! ارتقا فست رفرش دوست داشتنی! :طبق ادعا نکست ، فست رفرش اولویت بندی میشه و در هر بار رفرش شده چیزی نزدیک به 100 تا 200 میلی ثانیه سرعتش بیشتره ( البته که خیلی به چشم نمیاد و بیزنسی به قضیه نگاه کنین)کش سیستم سمت مرورگر هم بهتر انجام میشه به این شکل که با توجه به این که خود بیلد هم تشخیص میده کدوم فایلا تغییر کردن ( سیستم مشابه ویچرال دام رو اینجا برای فایلا پیاده سازی کردن و با یه diff میتونن تفاوتارو متوجه بشن درست چیزی شبیه به گیت ! ) این عمل باعث میشه مرورگر ها هم بهتر جاوااسکریپت و کانتنت های شما رو کش کنند !ارتقا چیزی که نکست بهش میگه tree shaken : در واقع اینطوری ازش برداشت میشه که ایمپورت هایی که استفاده نشدن تو کد میاد براتون توی بیلد پاک میکنه تا پرفورمنس بهتری بگیرید و خب این تو اپدیت جدید عملکردش بهتر شده و سرعت بهتری بهتون میدهیه چیز خیلی جالبی که اعلام کردند این بوده که خیلی وقت زیادی توی مایگریشن کردن به سمت وب پک 5 شدن نکست جی اس انجام شده و چیزی بالغ بر 340 هزار تست (integration tests) براش در نظر گرفتن !5. بهبود پرفورمنس خود نکست Cli و کامند هایی که برای ران کردن اپ انجام میشده ، سریعتر عمل میکنند مثل next dev که 33 درصد بهتر عمل میکنه و خب نشون میده که زوم این نسخه بیشتر رو مباحث cli و بیلد و ... بوده !6. یه اتفاق جالب تو این نسخه اینه که موقع نویگیشن روت ها اول فوکس نکست روی المنت هایی هست که یوزر میبینه یعنی خود کانتنت و بادی و بعد میاد بقیه جاها رو اپدیت میکنه و این خیلی نکته جالبیه تو گیفی که داخل سایت گذاشته نشون میده که وقتی نویگیت میکنه اول متن ها نمایان میشن و بعد تگ title آپدیت میشه این شکلی کانتنت زودتر برای یوزر نشون داده میشه و به قول خودشون دسترسی و تجربه کاربری بهتری داره .7.ویژگی جالب بعدی نکست جی اس قابلیتی هست که باعث میشه شما داخل ری دایرکت های سمت سرور و ری رایت های سمت سرور یک پراپرتی داشته باشید به اسم "has"! حالا این به چه کار میاد ؟ تصور کنین یوزری با مرورگر خیلی قدیمی وارد سایتتون شده که مثلا شما تو استایلا از flex استفاده کردین و ساپورت نمیکنه اون صفحه رو یا از یه قابلیتی که رو مرورگر قدیمی قابل اجرا نیست شما میتونین یه سری شرطاتون داخل has تعریف کنین ( اینجوری بخونین آیا این شرط را دارد (has)) و بعد از اینکه true برگردونه ریدایرکت یا ری رایت سمت سرورتون اجرا میشه ! حتی میتونین با این روش کوکی های سمت سرورتون رو هم بخونین و بعد اجازه دسترسی به یوزر بدین و اگر کوکی اش validate نبود ریدایرکتش کنین ! نمونه کد پایین تو تفهیم صحبتام کمکتون میکنه !module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'User-Agent', value: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)' } ], destination: '/old-browser', permanent: false } ] }}این کد با چک کردن UserAgant و مرورگر کاربر در صورت نداشتن نسخه مناسب او را به صفحه مخصوص خود ریدایرکت میکندالبته قابلیت فیلتر کردن آیپی رو هم میشه باهاش انجام داد ! جدای از کلود فلر یا ابر اروان یا dns ها module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'x-vercel-ip-country', value: 'GB' } ], destination: '/:path*/uk', permanent: true } ] }}در نهایت با کوکی های سمت سرور هم این شکلی میشه مبحث شیرین احراز هویت رو پیاده سازی کرد module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'x-authorized', value: '(?yes|true)' } ], destination: '/dashboard?authorized=:authorized', permanent: false } ] }}8.بهبود فونت ها : نکست میگه 83 درصد وب داره از فونت استفاده میکنه ولی خب درصد اپتیمایزی خیلی خیلی کمتر از این حرفاست و صرفا داره ایمپورت میشه و ازش استفاده میشه ، کار خفنی که نکست انجام میده اینه که برای اون دسته از دوستان که خیلی First Contentful Paint (FCP) ، Largest Contentful Paint (LCP) علاقه دارند و عمدتا سئو کار هستند یه قابلیت جدیدی معرفی کرده که باعث میشه فونت ها به شکل این لاین به تگ استایلی که درون اون صفحه ای که برای شما در حال نمایش هست اضافه بشه این شکلی نکست جی اس معتقده پرفورمنس خیلی خوبی تو سئو گرفته !// Before// Afterالبته که نکست مبحث فونت ها رو مثه فیلم های اصغر فرهادی پایان باز میزاره و میگه داریم رو یه ویژگی جدید کار میکنیم که اگر اون بیاد میگید مگه میشه ؟ مگه داریم ؟ و اون هم انواع استراتژی های مختلف لود فونت هاست ، البته اینجا من هم براتون یه توصیه دارم و اونم اینه که حتما داخل فونتتون این پراپرتی رو بزارید و بکارتون میاد @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-display: swap; با این کار شما به وب میفهمونید که تا زمانی که فونتم لود نشده فونت عادی خودتو بزار هر وقت لود شد جایگزین کن font-display: swap; و در آخر یه خبر خیلی خفن میده و میگه توبیاس کوپرز افسانه ای ( فوندر وب پک ) به تیم Vercel اضافه شده و مشخصه که چقد داره Vercel بریز بپاش میکنه ، البته اینو هم مشخص میکنه که چقد وب پک از این به بعد فوکس میکنه رو بحث پرفورمنس و آماده تغییرات خیلی خفن تو بحث کانفیگ وب پک روی نکست باید باشیم ! یه چیز خیلی جالب راجب کوپرز اینه که اولش میاد یه ریپو میزنه و باعث جلب شدن توجهات توسعه دهنده ها میشه کلی ایششو دریافت میکنه ولی خب یه روز یکی بهش میگه میتونی یه چیز خفن تر از این بزنی و همین جرقه ای میشه که اون ریپو رو میبنده و یه ریپو جدید میزنه به اسم وب پک امروزی ! خواستم اینو بت بگم تویی که اینو خوندی میتونی یه روز یه چیز خیلی خفنی بسازی پس بهانه رو بزار کنار نگو خسته ام نگو نمیشه ! فقط انجامش بده ! همین !کامنت و لایکاتون باعث دلگرمی عه !مخلصیم پوریا باباعلی !لینکدین من : https://ir.linkedin.com/in/pouriya-babaaliمنبع: https://nextjs.org/blog/next-10-2

سوالات مصاحبه برای کتابخانه React.js

آراز شمس الدینلوی — Tue, 12 Jan 2021 11:39:02 +0330

ری اکت پر طرفدار ترین کتابخانه جاوا اسکریپتبا سلام خدمت دوستانری اکت پرطرفدارترین کتابخانه ری اکت هست و مطمئنا تخصص داشتن توی این کتابخونه میتونه موقعیت شغلی و حقوق شمارو تا چند برابر افزایش بده. کتابخانه ری اکت توسط فیسبوک در سال 2013 ارائه شد و با استقبال بی نظیر توسعه دهنده های جاوا اسکریپت قرار گرفت.توی مقاله قبلم راجع به سوالاتی که ممکن هست درباره فریمورک انگولار پرسیده بشه رو براتون نوشتم. توی این مقاله میخوام راجع به سوالاتی که ممکن است از کتابخانه ری اکت پرسیده بشه رو براتون مینویسم. توجه داشته باشید که بنده خلاصه ای از پاسخ ها رو مینویسم و در صورت لزوم حتما بیشتر جستجو کنید و اطلاعات خودتون رو توی اون زمینه بالا ببرید.خوب بیشتر از این شمارو منتظر نمیزارم بریم سراغ سوالات:1) چرا ری اکت کتابخونه هست و فریمورک نیست؟به این دلیل به ری اکت میگن کتابخونه چون هسته این کتابخونه شامل همه امکانات لازم برای ساختن یه وبسایت کامل رو نداره. مثلا روتر ری اکت رو باید به صورت جدا به کتابخونه اضافه کنید و ...2) کامپوننت چیست؟کامپوننت ها در واقعه تکه هایی از کد شما هستن که اجزای تشکیل دهنده صفحتون رو میسازن. با استفاده از کامپوننت شما هم نیاز به تکرار کد ندارید و هم کد خوانا تری دارید.3) ری کانسیلیشن (reconcilation) چیست؟ری اکت برای دوباره رندر کردن کد شما ساختاری را استفاده میکند که به صورت بهینه و در کمترین زمان ممکن این رندر شدن به پایان برسه. به این شیوه میگن reconcilation که توی خود سایت ری اکت میتونید دقیقا این ساختار رو مطالعه کنید4) ریداکس چیست؟ریداکس در یه استیت مرکزی اپلیکیشن شما هستش و همه کامپوننت های شما به این استیت دسترسی دارن.5) آیا با context api کار کردید و چه استفاده ای داره؟کانتکست api در واقع یه متغیر گلوبال هست و برای پاس دادن یه متغیر یا یک مقداری به child component ها استفاده میشه. با استفاده از این روش میتونید از ایراد prop drilling جلوگیری کنید.6) مشکل prop drilling رو توضیح بدید و بگین که چطوری میشه جلوگیری کرد ازش؟این ایراد زمانی پیش میاد که شما میخواید یه property رو به کامپوننت های بچه پاس بدید و توی این مسیر از یه سری کامپوننت رد میشه این پراپرتی های شما که هیچ استفاده ای ازش ندارن. به این ایراد میگن prop drilling و با استفاده از context api یا redux یا composition میتونید از این ایراد جلوگیری کنید.7) کامپوننت composition چیست و چه کارایی دارد؟شما میتونید چند کامپوننت رو با هم با ساختاری که خودتون میخواید ترکیب کنید و یه کامپوننت جدید ایجاد کنید و از اون توی قسمت های مختلف سایتتون استفاده کنید. به این ویژگی میگن component composition.8) چرا با وجود context api باز هم از redux استفاده میشه و فرق اینا چی هست؟توی خود ریداکس از ویژگی context استفاده شده اما این 2 ویژگی تفاوت هایی با هم دارن. کانتکست کاراییش برای زمانی هستش که شما میخواید یک مقدار رو به child component ها پاس بدید و مورد استفادش توی این موارد هست اما ریداکس هسته مرکزی دیتا های ذخیره شده شماست و همه کامپوننت ها همزمان به این دیتا دسترسی دارن. همچنین ریداکس یه سری middleware داره که امکانات بیشتری رو نسبت به context api در اختیار شما قرار میدن.9) ریداکس middleware چی هستن و چه استفاده ای دارن؟در واقع اینها یک واسط هستن برای استفاده شما از ریداکس که یه سری ویژگی رو در اختیار شما قرار میدن. دو تا از معروف ترین middleware هایی که در ریداکس استفاده میشه redux thunk و redux saga هستن. به طور مثال توی ریداکس تانک شما میتونید به جای دیتا یه فانکشن پاس بدید توی ریداکستون و ...10) فرق استیت و پراپ چی هستش؟استیت ها در واقع دیتای شما هستن و زمانی که به child component پاس داده میشن به عنوان پراپرتی قابل استفاده هستن و قابل تغییر نخواهند بود مگر استیتی که پاس داده شده تغییر کنه.11) ویژگی destruction و spread رو توضیح بدید.توی ویژگی destruction شما میتونید به یه پراپرتی از یه آبجکت بدون انجام هیچ عملیات اضافه دسترسی داشته باشید به عنوان مثال شما یک شی دارید به اسم a با این فرمت:let a = {'name': 'Araz', 'family': 'Shams'};حالا شما میخواید به پراپرتی نیم دسترسی داشته باشید. این کار به سادگی با روش descruction قابل دسترسی هست"let {name} = a;یا مثال زیر:var obj = {a: 1, b: 2, c: 3};var {a=5, b=5, d=5} = obj;خوب میرسیم به ویژگی spread. شما میتونی یه آرایه رو پخش کنید به صورتی که همه المان هارو جدا جدا بهشون دسترسی داشته باشید. معمولا برای پاس دادن پراپرتی ها یا کپی کردن آرایه و غیره استفاده میشه و معمولا با سه نقطه یا (...) نشون داده میشه مثلا مثال زیر برای کپی کردن استفاده میشه:let a = [1,2,3]'let b = [...a];12) ویژگی rest و spread چه فرق هایی با هم دارن؟ویژگی spread رو توی سوال قبل گفتم اما ویژگی rest از همون spread استفاده میکنه توی تابع ها و شما هر چقدر بخواید میتونید آرگومان پاس بدید به تابع.13) توی ری اکت ما چند مدل کامپوننت داریم؟سه مدل داریم: functional component, class component, pure componentکلاس کامپوننت ها در واقع همون کامپوننت های اپ شما هستن که با ویژگی کلاس تعریف میشن. اما functional component ها در واقع همون کامپوننت های شما هستن که با تابع تعریف میشن و pure component ها برای سرعت بخشیدن به سایت شما انجام میشه که کامپوننت هایی که نیاز به ری رندر شدن زیاد ندارن و طی شرایط خاصی باید ری رندر بشن و به ازای هر ورودی همون خروجی رو میگیرن توی هر زمانی استفاده میشه.14) لایف سایکل های ری اکت رو توی کلاس کامپوننت ها نام ببرید:زمانی که شما یه کلاس کامپوننت میسازید یه سری تابع به صورت اتوماتیک صدا زده میشن که طی شرایط خاصی لازم میشن. اینجا این لایف سایکل هارو نام میبرم به ترتیب و مطالعش با خودتون:componentWillMount, componentDidMount, componentShouldUpdate, componentWillReceiveProps, componentUnmount15) مزیت functional component نسبت به class component ها چیست؟مزیت توابع نسبت به کلاس ها این هست که هم کد شما خوانا تر هست و هم قابلیت به اشتراک گذاشتن منطق رو توی کامپوننت های مختلف دارید بر خلاف کلاس کامپوننت ها.16) هوک چیه و چه استفاده هایی داره؟شما همون امکاناتی که توی کلاس کامپوننت ها دارید میتونید توی فانکشنال کامپوننت ها هم داشته باشید با استفاده از هوک ها. همچنین شما خودتون میتونی هوک اختصاصی خودتون رو بنویسید که بهش میگن custom hook که همون بحث به اشتراک گذاشتن منطق توی قسمت های مختلف هست.17) معروفترین هوک توی ری اکت رو نام ببرید به نظر شخصیتون و بگین چه استفاده هایی داره؟معروفترین هوک توی ری اکت هوک useEffect هست و لایف سایکل های component did mount و componentunmount رو براتون شبیه سازی میکنه. چیزی که توی این هوک مینویسید در واقع همون componentdidmount هست و چیزی که return میکنید همون componentunmount هست.18) ارگومان دومی که به useEffect پاس داده میشه چیه و چه ویژگی هایی داره؟ارگومان دوم در واقع همون وابستگی ها یا dependency های لایف سایکل useEffect هست و به شما میگه که به ازای تغییر چه ویژگی هایی باید این هوک دوباره اجرا بشه ... اگر یه آرایه خالی باشه یعنی یه بار فقط توی didmount کامپوننتون قابل اجراست19) چرا توی فانکشنال کامپوننت ها باید حتما react ایمپورت بشه وگرنه ارور میگیریم؟دلیلش این هستش که شما توی html که دارید رندر میگیرین از ویژگی React.createElement استفاده میکنید و نیاز هست حتما ایمپورت بشه البته از ری اکت 17 به بعد لازم نیست که ایمپورت کنید و ری اکت ساختار خاص خودش رو داره.20) ویرچوال دام (Virtual Dom) چیه و چه فرقی با Real Dom داره؟در واقع Virtual Dom کد اچ تی ام ال شما هست که به صورت آبجکت جاوا اسکریپت ذخیره میشه و سرعت اپ شمارو نسبت به Real Dom به شدت میبره بالا. توی ری اکت شما میتونید قسمتی از کد خودتون رو تغییر بدید و دوباره رندر بگیرین که بر خلاف Real Dom که کد html دوباره رندر گرفته میشه.21) چند تا از هوک هارو نام ببرید.useEffect, useState, useReduce, useSelector, useContext, useMemo,22) کاستوم هوک ها (custom hooks) چی هستش و چه استفاده ای داره؟اینها در واقع همون هوک هایی هستن که شما برای خودتون مینویسید و هوک دیفالت ریک اکت نیست و همون لاجیکی هستش که شما شیر میکنید بین کامپوننت های مختلفتون و با استفاده از روش destruction که قبلا بهتون گفتیم میتونید بهشون دسترسی داشته باشید23) پراپرتی هارو چطوری validate میکنید؟با استفاده از ویژگی proptypes ها24) رفرنس ها یا refs ها چی هستن و چه استفاده ای دارن؟رفرنس ها در واقع اشاره میکنن به یه ورودی شما و شما میتونی هر کاری با اون input کنید مثل focus و ... همچنین میتونید این رفرنس رو پاس بدید و توی کامپوننت های دیگه ازش استفاده کنید.25) های اوردر کامپوننت HOC یا Higher Order Components ها چی هستن؟اینها کامپوننت هایی هستن که یه کامپوننت به عنوان ورودی میگیرن و یه کامپوننت جدید رو برمیگردونن.26) فرق بین controlled component و un controlled component ها چی هست؟فرقشون این هست که توی controlled component ها شما تغییرات ورودی خودتون رو دنبال میکنید توی فرم و هر تغییری که ایجاد میشه توی state خودتون ذخیره میکنید با استفاده از و ... اما توی un controlled ها شما فقط موقع ارسال فرم و ثبت فرم با استفاده از refs ها به دیتای فرمتون دسترسی دارید و از اونها استفاده میکنید27) شما زمانی که توی constructor خودتون از super() استفاده میکنید چه ویژگی داره؟باعث میشه که بتونید از props.this توی کلاس خودتون استفاده کنید در غیر این صورت مقدار undefined برگشت داده میشه. البته اصولی تر بخوام بگم ارث بری کلاس کامپوننت شما از ری اکت کامپوننت هست.28 ) جی اس ایکس یا jsx چیست؟همون کد های اچ تی ام ال شما که توی کد جاوا اسکریپت استفاده میشه که باعث ایجاده virtual dom میشه رو میگن jsx یعنی مخفف javascript xml.29) چرا برای به روز کردن استیت از useState استفاده میکنیم و مستقیم مقدار دهی نمیکنیم؟به این دلیل که اگر مستقیم مقداردهی بشه کامپوننت شما دوباره رندر نمیشه.30) پروفایلر ها یا profiler ها چی هستن و چه استفاده ای دارن؟پروفایلر ها یک تگ اچ تی ام ال مانند هستن که یه متد دارن به اسم onRender که شما میتونید زمانی که اون تیکه کد رندر میشه یه متد رو صدا بزنید. برای بررسی کردن سرعت کامپوننت و اینکه اگر میخواید عملیاتی توی رندر شدن اون تیکه کد انجام بدید استفاده میشه31) پرتال ها یا portal ها چی هستن و چه استفاده ای دارن؟شما میتونید توی کامپوننت خودتون یه تیکه کد رو بیرون از کامپوننت رندر بگیرین. مثلا شما میخواید یه مودال رو قبل از بسته شدن تگ body بیرون از کامپوننت رندر بگیرین که از پورتال ها استفاده میشه32) کلید ها یا keys توی loop هایی که روی DOM میزنید چه استفاده ای داره؟این کلید ها باید یکتا باشه و ری اکت با استفاده از این کلید ها شناسایی میکنه دام شمارو توی لوپ و میتونه تغییرات و ایونت هرو بهتر اعمال کنه.33) فرگمنت ها یا Fragment ها چی هستن؟اینها در واقع تگ های اچ تی ام الی هستن که موقع رندر شدن رندر نمیشن و از DOM اضافه جلوگیری میکنن. مثلا شما توی کامپوننت ری اکتتون یه روت یا root دارید که میتونه همین فرگمنت ها باشه و از دام اضافه جلوگیری میکنه34) برای هندل کردن ارور ها از چی استفاده میشه توی ری اکت؟از یه چیزی به اسم ErrorBoundaries استفاده میشه. این تگ رو دور اون قسمتی که میخواید چک کنید ببینید ارور داره یا نه قرار میدین و با استفاده از متد که زمانی که یه ارور اتفاق میوفته یه متد رو صدا میزنید.35) برای سرعت بخشید به یه اپ چه پیشنهاداتی دارید؟استفاده از purecomponent ها و useMemo ها برای کش کردن اپتون و همچنین کامپوننت های کوچک که هزینه رندر کردن رو بیاره پایین و لیست های طولانیتون رو فقط اون فیلد هایی که نیازه رو استفاده کنید که بهش میگن virtualize long lists و همچنین تا جایی که ممکنه از رندر کردن های بی جا و حجم زیاد اچ تی ام ال جلوگیری کنید. همچنین تغییراتی که توی لیست هاتون میدین و نمیخواید توی چایلد ها استفاده بشه از concat و غیره میتونی استفاده کنید که پراپرتی هاتون تغییر نکنه و ...این لینک رو بخونید: https://reactjs.org/docs/optimizing-performance.html36) وب کامپوننت ها چی هستن و چه استفاده ای دارن؟شما میتونید تگ اچ تی ام ال جدید تعریف کنید که شامل قسمت های مختلفی از لاجیکتون باشه که از HTMLElement ها ارث بری میکنن و میتونید هر جا خواستید استفاده کنید.37) توی ری اکت strict mode چیست؟یه سری استاندارد هست که باعث میشه کدتون خواناتر و تمیزتر باشه. لینک زیر رو بخونید:https://reactjs.org/docs/strict-mode.html38) برای تست نوشتن از چی استفاده میکنید؟معمولا ری اکت رو با jest تست نویسی میکنن که میتونید برید مطالعه کنید.39) معمولا ریکوئست هاتون رو با چی میزنین و توی کدوم لایف سایکل؟بهترین لایف سایکل برای ریکوئست هاتون componentdidmount هست و معمولا از کتابخونه axios استفاده میشه که دیتا های بیشتری رو در اختیارتون میزاره.40) توی ریداکس action ها و dispatcher ها و reducer ها و Provider ها چی هستن؟اکشن ها در واقع همون اتفاقاتی هستن که قراره به دیتای مرکزیتون اطلاع داده باشه و این اطلاع توسط dispatcher ها اتفاق میوفته و به reducer ها پاس داده میشه این اکشن ها. این reducer ها استیت جدید شمارو تعریف میکنن بر اساس اکشن ها و توی دیتای مرکزی و ذخیره مرکزیتون ذخیره میکنن. همچنین Provider ها ناحیه ای که این دیتا قابل دسترسی هست رو براتون مشخص میکنه که معمولا توی App.js بیرون کل DOM قرار داده میشه.41) لیزی لودینگ یا Lazy Loading چیست؟این اتفاق باعث میشه کد شما تیکه تیکه بشه و در لود اولیه کد کدتون اجرا نشه و فقط کامپوننت هایی که قراره رندر بشن لود بشن. این اتفاق با استفاده از React.lazy اتفاق میوفته و بیرونش یه تگ Suspense میزان که یه متد به اسم fallback داره که شما میتونید یه لودینگ بزارید تا زمانی که کامپوننت شما لود میشه.42) روتر ری اکت چیست و چه استفاده ای داره؟چون ری اکت برای اپ های تک صفحه ای استفاده میشه یا SPA لینک های شما بدون رفرش شدن صفحه لود میشن. این کار با استفاده از روتر ری اکت قابل انجام هست که از پکیج react-router-dom استفاده میشه و شما میتونید صفحاتتون رو تعریف کنید و لینک کنید به هم بدون رفرش شدن صفحه.43) شما babel میدونید چیه؟در واقع یک کامپایلر هست که میاد jsx شمارو تبدیل به کدی میکنه که قابل شناسایی برای مرورگر ها هستش. یک polyfill هم به حساب میاد چون هم مرورگر های قدیمی میشناسنش هم مرورگر های جدید44) سرور کامپوننت های یا React Server Component (RSC) چیست؟شمارو ارجاع میدم به این مقاله کامل و جامع: https://virgool.io/JustReact/react-server-component-juywzxefdyzm?source=grid_footer_post-----0-4445) این که اساسا css in js چیه و چه مشکلی رو حل میکنه و با چه سیستم های کار کردی توی این زمینه؟شما میتوانید استایل هارو به صورت یک آبجکت تعریف کنید و توی jsx از اونها استفاده کنید و bind کنید به virtual dom. این ابجکت به صورت اینلاین سی اس اس اضافه میشه. فرضا شما یه کامپوننت پدر دارید و یه کامپوننت چایلد. استایل های کامپوننت پدر ممکنه توی چایلد نوشته بشه و اور رایت بشه. با استفاده از این متد میشه استایل اینلاین داد و از این مشکل جلوگیری کرد. یکی از سیستم هایی که توی این زمینه کار میکنه jss هست.این خلاصه ای بود از تجربه من توی 3 4 سال تجربه توی برنامه نویسی ری اکت. این مطالب صرفا جهت اطلاع شما عزیزان نوشته شده و میتونید برای درک عمیق تر این مطالب از سایت خود ری اکت استفاده کنید.https://reactjs.org/امیدوارم که این مطالب کمکتون کرده باشه. لینک لینکداین خودم رو هم میزارم در صورت داشتن سوال خوشحال میشم باهاتون در ارتباط باشم https://www.linkedin.com/in/araz-shams/تشکر از شما دوستانآراز شمس الدینلوی

قابلیت Server Components ، هدیه کریسمس React برای توسعه دهندگانش

Pouriya Babaali — Tue, 22 Dec 2020 18:27:37 +0330

قابلیت های جدید ری اکت 18 را از این مقاله میتوانید بخوانیدبعد از انتشار نسخه 16 ری اکت و با اضافه شدن قابلیت Hooks بسیاری از توسعه دهنده های این کتابخانه به فکر بروزرسانی کدهایی که نوشته بودند افتادند اگر چه که با کد های قدیمی هم اپلیکیشن هاشون کار میکرد ولی قابلیت Hooks و شخصی سازی و پرفورمنس فانکشنال کامپوننت ها (Functional Component ها ) اون ها رو برای بروزرسانی کد هاشون وسوسه میکرد .در یکی از صفحات داکیومنت ری اکت به مشکلاتی که کلاس کامپوننت ها (Class Component) داشتند اشاره شده که پیشنهاد میکنم از این لینک حتما مطالعه کنید . https://reactjs.org/docs/hooks-intro.htmlخیلی از مواردی که اون زمان برای توسعه دهنده های ری اکت اتفاق افتاده بود مثل گمراه شدن در استفاده از (this) یا لفظی که خود توسعه دهندگان ری اکت بهش اشاره کردند (Classes confuse both people and machines) که کلاس کامپوننت ها هم توسعه دهنده ها و هم ماشین ها رو دچار گمراهی کرده بودند این ذهنیت رو در توسعه دهنده های ری اکت جا انداخت که اون ها علاوه بر اینکه میتونن نقش خیلی جدی تو فیچر های آینده ری اکت یا حل مشکلاتش داشته باشند ، میتونند همه تقصیر ها رو هم گردن ری اکت بندازن!حدودا 5 ماه از نسخه بروز شده ری اکت یعنی ری اکت 17 میگذره ، ری اکت همونجوری که در داکیومنت رسمی خودش گفته بود هیچ ویژگی جدیدی به ری اکت اضافه نکرده [البته پیشنهاد میکنم حتما داکیومنت فارسی ری اکت رو که به این بخش میپردازه و من اون رو ترجمه کردم رو از این لینک مطالعه کنید] و بعد از دو و نیم سال آب پاکی ریخته رو دست توسعه دهندگانش ! البته کمی خواست در نسخه 17 ری اکت اونارو راضی نگه داره به طور مثال دیگ با قابلیت جدید JSX Transform نیاز نبود شما ابتدای هر خط ری اکت رو ایمپورت کنی و یا دیگ نیاز نبود مثل تغییر از ری اکت 15 به 16 کل کامپوننتاتو فانکشنال کنی میتونستی دو نسخه از ری اکت همزمان روی یه اپلیکیشن داشته باشی و یکیش رو به حالت Lazy Load در اپلیکیشنت داشته باشی ! اما خود توسعه دهنده های ری اکت هم متوجه این موضوع شدند که بعد دو و نیم سال با توجه به اون انتشار طوفانی نسخه 16 ، طرفداران ری اکت نیاز به حداقل یه فیچر جذاب دارند و اونارو نمیشه با این فیچر هایی که ری اکت 17 داره راضی نگه داشت !بنظر شخصی من ری اکت در رقابت با فریم ورک هاش (در عین دوستی خیلی نزدیکی که با هم دارند ) داشت خیلی عقب میوفتاد ! قابلیتی مشابه JSX Transform خیلی وقت بود در Nextjs وجود داشت ! خیلیا ری اکت رو در نسخه 17 محکوم به کپی برداری از فریم ورکش کردند و بیشتر از اینکه دنبال فیچر جدید باشه سعی کرده بود فیچر های فریم ورک هاش رو اضافه کنه به خودش ! ولی خب اینا همه تنها دلیل کوچ توسعه دهنده های ری اکت به سمت نکست نبود ! اونا دغدغه های مهم تری داشتند که تو ری اکت نتونستند راحت بهش برسند ! خیلی از توسعه دهنده های ری اکت به دلیل اینکه تازه کار بودند اطلاعات خوبی از وب پک نداشتند یا کد های بهینه ای نمیزدند ، با Code Spiliting آشنا نبودند و فکر میکردند که سئو سایت های ری اکت یک امتیاز منفی براشون در رقابت با رقیبانشون بشمار میره ، البته این موارد همه ی دلایلی که اونارو مجبور به کوچ به نکست کرد نیست اما شاید میتونم بگم اگر یه قابلیت SSR به ری اکت اضافه میشد خیلی از این تبدیل های پر هزینه انجام نمیشد ! خیلی تونستن این کار رو با اضافه کردن Express js و به شکل دستی انجام بدن و خیلی اپلیکیشن های جالب و جذابی شد ولی متاسفانه بسیاری از ساید افکت هایی که ایجاد میشد و دانش متوسط تیم های توسعه شاید باعث میشد عطای این کار رو به لقاش ببخشند ! و بله بالخره بعد این مقدمه طولانی میرسیم سر اصل مطلب و اون هدیه کریسمسی تیم توسعه ری اکت به توسعه دهندگانشه ! و اون هم چیزی نیست جز Server Components !!تیم توسعه ری اکت بعد از انتشار نسخه 17 و انتقاداتی که بهش وارد شد ، برگ آخرش رو برای روز های پایانی سال 2020 رو کرد ! و حالا این قابلیت چیه و به چه کاری میاد !اول از همه این مورد رو بدونید که این قابلیت در حال توسعه و تحقیق هست و هنوز به طور رسمی انتشار ندادنش و فعلا تنها چیزی که ازش داریم یه ویدیو و یه مخزن کد (ریپازیتوری) هست که پیشنهاد میکنم حتما ازش کلون بگیرید و با شکل و شمایل اتفاقاتی که داخلش میوفته آشنا بشید .https://github.com/reactjs/server-components-demohttps://youtu.be/TQQPAU21ZUwاین قابلیت به طور خلاصه RSC یا React Server Components نام داره ، در ویدیو معرفی که داخل سایت داکیومنت ری اکت هم هست ، یک کامپوننت به طور دمو ساخته شده و موارد و اتفاقات این ویژگی رو در اون بررسی میکنه ، پیشنهاد میکنم حتما اون ویدیو رو از دست ندین ! به طور خلاصه مواردی که این قابلیت قراره به ری اکت اضافه کنه این موارده : اجرای RSC فقط بروی سرور بدون بانل سایز ! (باندل سایز 0 ، دقیقا مشکلی که خیلیا با ری اکت داشتند باندل سایز های حجیم بود که باعث کند شدن اون کامپوننت و در نهایت کند شدن اپلیکیشنشون میشد )شما با RSC میتوانید مستقیما به دیتا های سمت سرور دسترسی داشته باشید به این شکل که شما میتونین مستقیما روی دیتابیس کئوری بزنید یا با میکروسرویس ها یا فایل سیستم های روی سرورتون دسترسی داشته باشید ( فقط میتونم بگم فوق العادست ! )با RSC شما میتونین تعیین کنین که کدوم کامپوننت سمت کاربر رندر بشند و کاربر فقط اون مقدار از کدی که میخواد و مورد نیازشه رو فقط مشاهده کنه ( دقیقا مشابه قابلیت های Code Spiliting و Lazy loading که ری اکت در داکیومنتش بررسی کرده بود اما این بار سمت سرور (مثل نکست ) که خیلیا ازش استفاده میکردند )استیت های شما با ریلود یا ری رندر شدن کامپوننت های سمت سرور یا RSC تون از بین نمیرن و تخریب نمیشن !کسایی که از React Lazy استفاده میکردند همزمان با اون از قابلیت به نام Suspense استفاده میکردند به این نحو که در هر حال تا زمانی که اون کامپوننت لود بشه یا حتی اگر لود نشه و خطا بخوره اون Suspense کال میشه و شما میتونین اونرو برای خودتون شخصی سازی کنین یا مثلا میتونستین لودینگ برای کامپوننتون بزارین ! و حالا این قابلیت در RSC ها هم وجود داره و اون ها به شکل واحد های استریم مانند به UI شما تزریق میشن این قابلیت میتونه به توسعه دهنده های ری اکت کمک کنه اونا تیکه تیکه به یوزر دیتا رو نشون بدن تا پرفورمنس اپلیکیشن بالاتر بره ! همه این ها با قابلیتی هم اسم و مشابه Suspense انجام میگیره ! توسعه دهنده های ری اکت میتونن کد هاشونو بین سمت سرور و سمت کاربر منتشر کنند به این نحو که شمه میتونین یه کامپوننت که برای نشون دادن یه متن ثابت یا استاتیک استفاده میشه رو سمت سرور بسازید بعد اون رو سمت کاربر داینامیک کنین اینجوری دیگ تنها زمانی که این وسط تلف میشه داینامیک شدن کامپوننته نه ساختنش ! و این میتونه کولاک کنه ! Zero-Bundle-Size Componentsاتفاقی که تا اینجا و تا همین زمانی که من برای شما مینویسم تو حوزه توسعه اپ های ری اکتی میوفتاد این بود که ما از یه سری پکیج ها استفاده میکردیم به طور مثال از Jalali Moment یا Moment برای تبدیل تاریخ هامون استفاده میکردیم یا از sanitize-html برای تمیز شدن کد های html از ckeditor یا ما بقی ادیتور ها استفاده میکردیم یا حتی خیلی از پکیج هایی که کار رو برامون راحت میکردند ولی خب همونجوری که میدونین همه این پکیج ها یک فضایی رو اشغال میکنن و زمانی که با gzip اون ها رو کامپکت میکردیم و webPack هم اون ها رو باندل میکرد به یک فضای اشغال شده ای میرسیدیم که بهش باندل سایز میگفتیم ! خب فرض کنین یه کامپوننت دارین که از هیچ کدوم از این پکیج ها استفاده نکرده بود ولی خب چون این پکیج نصب شده بود و ایمپورت شده بود باندل سایز داشت ! به طور مثال import Momentfrom 'moment'; // 35.9K (11.2K gzipped) import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped) function Calender({text}) { // some code for date converting and use sanitizeHtml // for cleaning Html From Ckeditor markups ! }و حالا میخواین بدونید بعد این قابلیت چه اتفاقی میوفته ؟ این شکلی میشه !import Momentfrom 'moment'; // Zero bundle size import sanitizeHtml from 'sanitize-html'; // Zero bundle size function Calender({text}) { // some code for date converting and use sanitizeHtml // for cleaning Html From Ckeditor markups ! }بله دقیقا چیزی که انتظار داشتیم ! پکیج های ما دیگ سمت سرور باندل سایزی رو به اپلیکیشن ما تحمیل نمیکنند و این فیچر به نظر میتونه یکی از انقلابی ترین قابلیت های ری اکت بین تمامی نسخه هایی باشه که تا الان ریلیز کرده !!!البته فلن باتوجه به اعلام تیم ری اکت منتظر بعد کریسمس باید باشیم و ببینیم که این فیچر که فلن در حالت توسعه و تحقیق تیم ری اکت هست کی قراره ریلیز بشه!ممنون از وقتی که قرار دادین و این مقاله رو مطالعه کردین اگر این مقاله رو دوست داشتین حتما برای دوستانتون بفرستین تا بتونن از اتفاقاتی که در حوزه ری اکت قراره بیوفته مطلع بشن !با من میتونین در لینکدین در ارتباط باشین لینک لینکدین من : linkedin.com/in/pouriya-babaali-2381661b5

نمایش svg در react native

reactapp.ir — Sun, 26 Apr 2020 20:51:38 +0430

تصاویر svg که با Scalable Vector Graphics نیز شناخته می شوند یک نوع markup language قابل توسعه برای تصاویر دوبعدی گرافیکی است.این نوع فرمت تصویر بین توسعه دهندگان وب و bobile مشهور است زیرا تصاویر با فرمت SVG بر پایه پیکسل نیستند ، بنابراین حتی در صورتی که کشیده شوند، محو یا برش داده نمی شوند.در react native ما به صورت مستقیم نمی توانیم SVG را نمایش دهیم.ما باید از کتابخانه react-native-svg استفاده کنیم.این کتابخانه توسط توسعه دهندگان در هر هفته 2500 بار دانلود می شود.در این مقاله ما تصاویر SVG را به صورت online از url و به صورت local نمایش می دهیم.نکته: کتابخانه react-native-svg فقط تصاویر SVG به صورت online را نمایش می دهد و ما نمی توانیم تصاویر SVG به صورت local را نمایش دهیم به همین دلیل از یک کتابخانه دیگر به نام react-native-svg-uri استفاده می کنیم.این کتابخانه بر پایه react-native-svg است و فقط قابلیت نمایش به صورت local را اضافه کرده است.1.اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.npm install react-native-svg --save با توجه به اینکه نمیتونیم SVG های local رو با کتابخانه فوق نمایش بدهیم .بنابراین کتابخانه react-native-svg-uri رو نصب می کنیم .برای اینکار کافیه دستور زیر رو در دایرکتوری اصلی پروژه اجرا کنیمnpm install react-native-svg-uri --save2.تا حالا هر دو تا کتابخانه به پروژه ما اضافه شدند و نوبت به link کردن آن ها است.برای اینکار باید دستور زیر را اجرا کنیم.توجه داشته باشید که اگر نسخه react native شما بالاتر از 60 است، نیازی به اجرای دستور زیر نیستreact-native link react-native-svg3. ما تصاویر SVG را به هر دو صورت online و local نمایش می دهیم که برای نمایش به صورت local یک پوشه به نام images در root اصلی پروژه ایجاد می کنیم.4.تصاویر svg که قرار است به صورت local نمایش بدهیم.درون این پوشه قرار می دهیم.5.ایمپورت StyleSheet, Text وViewدر App.js:import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native';6.ایمپورت SvgUri از کتابخانه react-native-svg-uriimport SvgUri from 'react-native-svg-uri';7.فراخوانی console.disableYellowBox با مقدار true برای اینکه دیگر هشدار ها دیگر نمایش داده نشود.از این مرحله را می توانید صرف نظر کنید.console.disableYellowBox = true;8.ایجاد یک کلاس به نام Appexport default class App extends Component { }9.ما دو تا کامپوننت SvgUri در بلاک render’s return قرار می دهیم.اولی برای نمایش SVG به صورت online و دیگری برای نمایش SVG به صورت localrender() { return ( Showing SVG Format Image Icon From URL in React Native Showing SVG Format Image Icon Locally in React Native ); }10.ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });11.کد کامل برنامه در فایل App.jsimport React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; console.disableYellowBox = true; export default class App extends Component { render() { return ( Showing SVG Format Image Icon From URL in React Native Showing SVG Format Image Icon Locally in React Native ); } } const styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.اسکرین شات:[منبع]

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

آپدیت جدید ری اکت(React) به نسخه 18 ، آیا آپدیت بزرگی در راه است ؟

آپدیت جدید NextJs(نکست جی اس) این غول دوست داشتنی

سوالات مصاحبه برای کتابخانه React.js

قابلیت Server Components ، هدیه کریسمس React برای توسعه دهندگانش

نمایش svg در react native