نوشته های امیرمسعود گراوند

مفهوم جریان رویداد(Event Flow)در جاوا اسکریپت

امیرمسعود گراوند — Fri, 31 Dec 2021 21:54:23 +0330

Event capturing and Event bubblingیکی از مفاهیم مهم در رابطه با رویدادهای DOM، مفهوم Event Flow یا Event Propagation است.که توی این پست سعی کردم با زبانی ساده توضیحش بدم. برای توضیح این مفهوم ابتدا یک سند HTML را به صورت زیر تعریف می‌کنیم. Event Flow

Click Me

اگر کاربر بر روی عنصر

کلیک کند در این صورت رویداد click برای این عنصر رخ می‌دهد. و اگر یک Event Handler برای این رویداد تعریف شده باشد، فراخوانی خواهد شد.کلیک کردن بر روی عنصر

، به معنی کلیک کردن بر روی عنصر می‌باشد,زیرا عنصر

بخشی از عنصر است.حال فرض کنید یک Event Handler نیز برای رویداد click از عنصر تعریف شده است با کلیک کردن بر روی عنصر

، این Event Handler نیز اجرا میشود.به زبانی دیگر هر رویدادی که برای یک عنصر خاص رخ می‌دهد، برای عنصر والد آن نیز رخ می‌دهد. همچنین اگر عنصر والد، فرزند عنصری دیگر باشد، این رویداد برای والد آن نیز رخ می‌دهد. و این روند تا ریشه‌ی درخت DOM، یعنی شئ document ادامه پیدا می‌کند.دوحالت برای اجرای ها Event Handler وجود دارد.حالت اول : ابتدا Event Handler عنصر والد اجرا شود و Event Handler عنصر فرزند پس از آن اجرا شود که به آن Capturing می گویند. حالت دوم: معکوس حالت اول است.یعنی ابتدا Event Handler عنصر فرزند اجرا شود و Event Handler عنصر والد پس از آن اجرا شود که به آن Bubbling می گویند. شکل زیر این دو حالت را نمایش میدهد.روشی که امروزه در تمام مرورگرها به کار می‌رود، ترکیبی از این دو حالت است. به این صورت که ابتدا رویداد برای شئ document رخ می‌دهد. سپس همین رویداد برای فرزندان شئ document تا رسیدن به عنصر نهایی رخ می‌دهد. در مرحله‌ی بعدی همین روند به صورت معکوس تا رسیدن به شئ document ادامه می‌یابد. شکل زیر ساختار استاندارد انتشار رویداد در DOM را نشان می‌دهد.برای نشان دادن مفهوم Event Flow به صورت عملی، به مثال زیر توجه کنید.const div = document.querySelector('#div1'); const body = document.body; div.addEventListener('click' , divHandler); body.addEventListener('click' , bodyHandler); function divHandler(){ console.log('divHandler'); } function bodyHandler(){ console.log('bodyHandler'); }حال در صورتی که روی عنصر

کلیک کنید، رویداد click ابتدا برای عنصر

و پس از آن برای عنصر رخ می‌دهد. در نتیجه ابتدا تابع divHandler و سپس تابع bodyHandler اجرا می‌شوند.به صورت پیش‌فرض، Event Handler ها فقط در فاز Bubbling اجرا می‌شوند. اما می‌توان حالت پیش‌فرض را به راحتی تغییر داد و توابعی را به عنوان Event Handler تعریف کرد که در فاز Capturing اجرا شوند. برای انجام این کار می‌توان از آرگومان سوم در متد addEventListener استفاده کرد که باید آن را برابر با true قرار دهیم. body.addEventListener('click' , bodyHandler , true);حال با کلیک کردن بر روی عنصر

، ابتدا تابع bodyHandler و سپس تابع divHandler اجرا می‌شوند.همچنین ما می توانیم از اجرای یک رویداد با استفاده از متد stopPropagation که در شئ event وجد دارد را بگیریم.اما استفاده از متد stopPropagation در فازهای Capturing و Bubbling به ندرت اتفاق می‌افتد. و معمولاً از این متد در فاز Target استفاده می‌شود.const div = document.querySelector('#div1'); const body = document.body; div.addEventListener('click' , divHandler); body.addEventListener('click' , bodyHandler); function divHandler(event){ console.log('I`m divHandler'); event.stopPropagation(); } function bodyHandler(){ console.log('I`m bodyHandler'); }در این مثال در تابع divHandler از متد stopPropagation استفاده شده است. بنابراین اگر بر روی عنصر

کلیک کنید، فقط تابع divHandler اجرا می‌شود. زیرا جریان انتشار رویداد در این تابع قطع شده و فاز Bubbling اجرا نمی‌شود. البته هنوز هم با کلیک کردن روی عنصر تابع bodyHandler اجرا می‌شود. زیرا در این حالت عنصر

جزئی از ساختار Event Flow نیست.

بهبود اپلیکیشن های React.js (قسمت دوم)

امیرمسعود گراوند — Mon, 27 Sep 2021 04:07:20 +0330

گاهی اوقات اپلیکیشن سریع و بی نقص کار می‌کند و به اشتباه تصور می‌کنیم که نقصی ندارد ,کتابخانه ی React.js ویژگی ها و تنظیماتی برای بهینه سازی اپلیکیشن ها در اختیار توسعه دهندگان قرار می دهد که این مقاله در ادامه ی مقاله ی قبلی به بررسی انواع روش ها برای بهبود کارایی اپلیکیشن های React.js میپردازیم.1-useCallback()به کمک هوک useCallback میتوانیم از re-render های غیر ضروری جلوگیری کنیم و کد بهینه تری داشته باشیم. useCallback یک Callback به صورت memorized بازمی‌گرداند و یک تابع و یک آرایه‌ از dependency ها رو به عنوان ورودی میگیرد. اگر یکی از مقادیر آرایه تغییر کند خروجی عوض میشود و اگه تغییر نکند، مقدار کش شده برگردانده میشودuseCallback( FooFunction() }, [dependencies]);2-عدم نمایش لیست طولانینباید یک لیست طولانی و داده زیاد را در اپلیکیشن خود رندر کنید و توصیه می شود دیتا را بخش بندی کنید و در هر viewport کاربر، قسمتی از لیست را به او نمایش دهید و تمام لیست را یکدفعه در لود اولیه نمایش ندهید.برای مشاهده ادامه لیست می توان با اسکرول کاربر اینکار را انجام داد یا اینکه صفحه بندی (pagination) پیاده سازی شود3-تکنیک بارگذاری تنبل یا Lazy loadingبارگذاری تنبل یا Lazy Loading یکی از تکنیک های رایج و محبوب برای افزایش سرعت لود نرم افزار و وب سایت می باشد. به منظور Lazy Load کردن کامپوننت های ریکت، React.lazy() API مورد استفاده قرار می گیرد. بارگذاری تنبل (Lazy loading) ویژگی جدیدی بود که در نسخه 16.6 ریکت ارائه شد. این قابلیت به توسعه دهندگان ری اکت کمک می کند تا براحتی بتوانند بارگذاری تنبل و code=splitting را پیاده سازی کنند.تابع React.lazy به ما این امکان را می دهد تا یک dynamic import را بصورت یک کامپوننت عادی و regular رندر کنیم.4-در زمان کار با گره‌های DOM از ارجاع Callback به جای ارجاع شیء استفاده کنیدبا این که React.useRef در زمینه الصاق و کنترل ارجاع‌ها به یک گره DOM جدید محسوب می‌شود، اما همواره بهترین گزینه نیست. برخی اوقات می‌خواهیم کنترل بیشتری روی گره DOM داشته باشیم تا بتوانیم کارکرد اضافه‌ای عرضه کنیم.مستندات ری‌اکت موقعیتی را توصیف می‌کنند که باید از یک ارجاع callback برای مطمئن شدن از این واقعیت استفاده کنیم که وقتی تغییراتی در مقدار ref کنونی ایجاد می‌شود، یک کامپوننت خارجی همچنان می‌تواند از به‌روزرسانی‌ها مطلع شود. این مزیتی است که ارجاع‌های Callback نسبت به useRef دارند, Material-ui از این مفهوم قدرتمند استفاده می‌کند تا کارکردهای اضافی را از طریق ماژول‌های کامپوننت عرضه کند. مهمترین بخش در این مورد آن است که این رفتار به صورت طبیعی موجب پاکسازی می‌شود.قسمت قبل https://vrgl.ir/6JNq3

انواع روش ها برای بهبود کارایی اپلیکیشن های ری اکت جی اس(React.js)قسمت اول

امیرمسعود گراوند — Tue, 21 Sep 2021 13:32:12 +0430

کتابخانه ری اکت (ReactJS)بی نظیر است برای تمام نواقص و مشکلات احتمالی یک راه حل بهینه دارد که در این مقاله میخواهم 5 روش برای بهبود کارایی و سرعت اپلیکشین های React.js را به صورت موردی مطرح کنم و در قسمت دوم موارد بعدی را بررسی کنم1.React.memoاگر با React.PureComponent آشنا باشید، در این صورت React.memo برای شما کاملاً سرراست خواهد بود، زیرا کاملاً مشابه React.PureComponent است. ما از React.PureComponent با کامپوننت کلاس استفاده می‌کنیم، اما React.memo به همراه کامپوننت‌های تابع عمل می‌کند.const App = () => { const [count1, setCount1] = React.useState(0) const [count2, setCount2] = React.useState(0) const increaseCounter1 = () => { setCount1(count1 => count1 + 1) } return ( <> Counter 1 Coutner 2 ) } const Counter = ({value, children}) => { console.log('Render: ', children) return (

{children}: {value}

) } export default Counterهر بار که کاربر روی دکمه کلیک می‌کند، حالت count1 تغییر می‌یابد و موجب می‌شود که اپلیکیشن هر دو شمارنده را رندر مجدد کند که این رندرها به عنوان «رندر مجدد غیرضروری» شناخته می‌شوند. با این حال، ما صرفاً انتظار داریم که counter1 رندر مجدد شود، چون هیچ چیزی در مورد counter2 تغییر نخواهد یافت. در عمل، هر دو شمارنده رندر مجدد می‌شوند.چگونه می‌توانیم این مشکل را رفع کنیم؟ پاسخ در React.memo است. تنها چیزی که نیاز داریم این است که کامپوننت شمارنده را درون React.memo قرار دهیم.const Counter = ({value, children}) => { console.log('Render: ', children) return (

{children}: {value}

) } export default React.memo(Counter)ری اکت ممو(React.memo)به صورت پیش‌فرض همه props ارسالی به کامپوننت را از طریق referential equality مقایسه می‌کند. اگر این props تغییری نیافته باشند، React.memo از آخرین نتیجه رندر مجدد شده استفاده می‌کند و از این رو از رندر شدن مجدد کامپوننت جلوگیری می‌کند.2.use.Memoیکی از هوک های ریکت (React Hook) می باشد که برای کار با کش (cache) در اپلیکیشن های ری اکت بکار می رود.توضیح خود را با بیان تعریف از مستندات رسمی آغاز می‌کنیم. useMemo یک مقدار «درون حافظه‌ای» (memoized) بازگشت می‌دهد.React.useMemo(() => { fooFunction() }, [dependencies])const App = () => { const fooFunction = () => { return 'Foo is just Food without D' } const useMemoResult = React.useMemo(fooFunction, []) console.log('useMemoResult: ', useMemoResult) return

Foo is just food without D

}یوز ممو (React.useMemo) اقدام به فراخوانی fooFunction می‌کند و نتیجه‌اش را بازگشت می‌دهد3.React.PureComponentیک کلاس کامپوننت base است که تمام فیلدهای state و props را چک می کند و در صورتی که تغییر پیدا کنند کامپوننت آپدیت خواهد شد. در غیر اینصورت رندر نخواهد شد.درست مانند کاری که متد shouldComponentUpdate در کلاس کامپوننت انجام می دهد، React.PureComponent نیز همینکار را می کند.4.shouldComponentUpdateبه طور پیش فرض این متد پیاده سازی شده نیست، پس هر تغییر توی props یا states باعث میشه کامپوننت re-render بشه، هنگامی که کامپوننت تصمیم به تغییر یا بروزرسانی DOM را دارد،این متد فراخوانی می شود.این متد به ما اجازه می دهد تا رفتار کامپوننت را در بروزرسانی آن کنترل کنیم.بدین صورت که اگر این متد مقدار true را بازگرداند،کامپوننت بروزرسانی خواهد شد،در غیر اینصورت از بروزرسانی کامپوننت صرف نظر خواهد کرد.در shouldComponentUpdate نمیتونیم از setState استفاده کنیم.5.استفاده از سلکتورهای reselectریداکس به شکل immutable کار می کند, به این معنی که با هر بار dispatch شدن action رفرنس های جدیدی از آبجکت تعریف می شود. این قضیه باعث کاهش بهره وری و کارایی نرم افزار خواهد شد. زیرا حتی اگر رفرنس آبجکت تغییر کند، کامپوننت re-render می شود. با اینکه فیلدهای آبجکت تغییر نکرده اند.لایبرری Reselect state ریداکس را کپسوله سازی یا encapsulate می کند و چک خواهد کرد که هر زمان مقدار فیلدهای آبجکت state تغییر کرد کامپوننت مجددا رندر شود.بنابراین reselect باعث می شود در زمان اجرای اپلیکیشن صرفه جویی شود. به این صورت که مقدار state قبل و بعد را چک می کند و اگر تغییر پیدا کرده بود کامپوننت re-render خواهد شد. وگرنه با تغییر رفرنس آبجکت state کامپوننت رندر نخواهد شد.قسمت دوم https://vrgl.ir/6JNq3

کتابخانه ی ReactJS چیست و چه کارهایی می توان با آن انجام داد؟

امیرمسعود گراوند — Mon, 20 Sep 2021 23:04:07 +0430

در سال ۲۰۱۱ این کتابخانه را تحت تاثیر XHP که یک کامپوننت Html برای زبان برنامه نویسی PHP‌ است، ایجاد شده است و در همین سال React روی قسمت News Feed شبکه اجتماعی فیسبوک به کار گرفته شد و ۲ سال بعد، یعنی در سال ۲۰۱۳ هم استفاده از آن توسط فیسبوک به اینستاگرام تعمیم پیدا کرد.ری اکت یک کتابخانه متن باز (Open source) جاوا اسکریپت است که به دلیل بهینه بودن React.js برای دریافت اطلاعاتی که با سرعت تغییر می‌کنند، می‌توان از آن برای توسعه برنامه ی تک صفحه ایی(SPA) یا برنامه‌های موبایل استفاده کرد, یکی از سریع‌ترین و محبوب‌ترین کتابخانه‌ها (Library) جاوا اسکریپت است که توسط فیسبوک اینستاگرام و یک جامعه مستقل از توسعه دهندگان وب مدیریت و نگهداری می‌شود.براساس آنالیزهای جاوااسکریپت سرویس لیبسکور، ری‌اکت در حال حاضر در سایت‌های نت فلکس، ایمجر، بلیچر ریپورت، فیدلی، ایر بی ان بی و … مورد استفاده قرار می‌گیرد.نکته مهم در کاربرد React.js سادگی و یادگیری آسان آن است و همچنین این کتابخانه صرفا در الگوی طراحی MVC، عهده‌دار بخش View است. View یا اینترفیس در واقع مرتبط با نمایش اجزا هست و طبعا React.js به جای پرداختن به الگوی MVC به وظایفی می‌پردازد که مربوط به نمایش اجزا است.کتابخانه React.js این قابلیت را برای برنامه نویسان می دهد تا برنامه های کاربردی تحت وب طراحی کنند که بدون بارگزاری مجدد صفحه می توان اطلاعات آن را تغییر داد. هدف اصلی کتابخانه React.js سریع بودن، قابل توسعه بودن و ساده بود و مقیاس پذیر بودن آن است, ما می توانیم عناصر رابط کاربری مانند یک دکمه یا یک قسمت ورودی را به عنوان یک کامپوننت ری اکت بنویسیم. یک کامپوننت ممکن است یک یا چند کامپوننت دیگر را در خروجی خود داشته باشد و می توانیم کامپوننت هایی با قابلیت استفاده مجدد نیز طراحی و ایجاد کنیم. حال برخی از ویژگی های React.js را بررسی می کنیم:جی اس ایکس(jsx) در React.jsدر React.js ، برای قالب بندی به جای استفاده از جاوا اسکریپت معمولی از JSX استفاده می شود. JSX یک جاوا اسکریپت ساده است که از HTML پیروی می کند و از این دستورات تگ HTML برای ارائه زیر کامپوننت ها در React استفاده می کند. زبان HTML به منظور پاسخ به فراخوانی های جاوا اسکریپت از سوی کتابخانه ی React پردازش شده است. در اینجا ما حتی می توانیم به زبان خالص قدیمی جاوا اسکریپت نیز کد بنویسیم.جریان اطلاعات تک خطی در React.jsدر React.js ، مجموعه ای از متغیرهای غیرقابل تغییر به عنوان مشخصه هایی در تگ های HTML خود به ارائه دهنده کامپوننت ها منتقل می شوند. کامپوننت ها نمی توانند به طور مستقیم هر خواصی را تغییر دهند اما می توانند بازگشتی یک تابع فراخوانی شده را قبول کنند بدین ترتیب ما می توانیم تغییرات خود را اعمال کنیم. تمام این فرآیند ها به شرح فوق شناخته شده اند: “جریان خاصیت ها کاهش می یابد ، جریان واکنش ها افزایش می یابد”.پراپس ها در React.jsپراپس ها باعث می شوند که مجموعه کامپوننت ها بتوانند از داده های سفارشی استفاده کنند. پراپس ها در React.js این امکان را فراهم می کنند تا داده های سفارشی به یک UI سفارشی انتقال خاصی انتقال پیدا کنند.ری اکت جی اس از DOM مجازی برای سرعت بخشیدن به برنامه استفاده می کنداین ساختار که به اختصار Virtual DOM نامیده می‌شود، ابتدا تغییرات انجام شده را محاسبه کرده و سپس مرورگر کاربر را آپدیت می‌کند. این ویژگی به طراح سایت و توسعه دهنده این امکان را می‌دهد که به گونه‌ای کد نویسی کند که انگار تمام صفحه با هر تغییر رندر می‌شود، در حالی که در واقع کتابخانه React تنها کامپوننت‌هایی را رندر می‌کند که واقعا تغییر کرده‌اند.ویژگی Single-Way data flowدر React.js، مجموعه‌ای از value های تغییر ناپذیر بین کامپوننت‌ها به عنوان ویژگی‌هایی(properties) در برچسب‌های HTML منتقل می‌شوند. کامپوننت‌ها به طور مستقیم نمی‌توانند هیچ یک از ویژگی‌ها (properties) را تغییر دهند اما میتوان آن‌ها را به call back function انتقال دهند و به کمک آن‌ها تغییرات را انجام دهند. این فرآیند به طور کامل با “properties flow down; actions flow up” شناخته می‌شود.اگر دلتان می‌خواهد یک تکنولوژی جدید یاد بگیرید که در تمام دوران حرفه‌ای وکاری خود از دانستن آن به خود ببالید، به شما پیشنهاد می‌کنم React.js را یادبگیرید امیدوارم متوجه شده باشید React.js چیه و بتونید با یادگیری این کتابخانه به توسعه پروژه های خودتون بپردازید و موقعیت های شغلی خوبی بدست بیارید.