to render or not to render that is the react question
چکیده
با توجه به عنوان مقاله شاید بهتر بگم ,مسئله اصلی در React برابر است با Render شدن یا دوباره دوباره دوباره و هزار باره و ده هزار باره و ... Render شدن , سوال اینست ؟!
پیشنهاد کارشناسان.نت :
ثبت نام هر دو کلاس حضوری مقدماتی و پیشرفته Asp.Net Core Blazor WebAssembly
تنها با 500 هزار تومان (هر دوره تکی 300 هزار تومان)
آموزش
با توجه به تجربه کاری من که در pure javascript بعلاوه jquery بوده , ورود به دنیای react فوق العاده جذاب بوده و هست . اینکه به جای نوشتن جاوااسکریپت و html به صورت جداگانه , اون ها به کمک babel در کنار هم نوشته شوند , تجربه ایی بسیار لذت بخش هست برای برنامه نویسی که طعم جاوا اسکریپت و Html جدا از هم رو چشیده .
اجازه بدید شفاف بگم ,من و react تو یه ماه عسل کامل بودیم و من دائما" در حال تعریف و تمجید از react بودم , لذت اصلی در این بود که react یه پرده ضخیم و abstrat بر روی اشیا DOM صفحه کشیده و برنامه نویس بدون اینکه نگران باشه چگونه این اشیا رو آپدیت کنه یا ایجاد کنه , فقط و فقط روی business خودش متمرکزه و react با هوشمندی تموم اشیا html شما رو آپدیت می کنه , تا جایی که این سوال تمجید آمیز رو راجب react از خودم پرسیدم :
"آخه مگه میشه یه کتابخانه جاوا اسکریپت اینقدر باهوش باشه ؟!"
اما هنوز لحظاتی از این سوال تمجید آمیز نگذشته بود که یه سوال ترسناک به ذهنم رسید :
"هزینه این باهوش بودن چقدر هست ؟!"
و باز لحظاتی نگذشته بود که بدترین سوال به ذهنم رسید :
"'آیا هزینه این هوش بالا رو باید CPU کاربر بده ؟!"
کاربر ناراضی از کندی , آخرین چیزی در دنیاست که یک برنامه نویس می خواد.
خوب اجازه بدید مشکل اصلی رو یه خورده شفاف تر کنم , فرض کنید شما یه چارت گرافیکی با render سنگین با react ساختید و با حرکت موس بر روی این چارت اطلاعات خیلی کوچکی در چارت تغییر می کنه , خوب react از کجا می فهمه کدوم قسمت از این چارت پیچیده رو باید از اول render کنه و بفهمه که اساسا کل چارت نیاز به render نداره ؟ و اگر این موضوع رو می فهمه با مصرف چه مقدار CPU ؟ و با چه الگوریتمی ؟ و با چه درجه دقتی ؟
با توجه به سابقه من در کار با جاوااسکریپت و jquery , من خودم به عنوان برنامه نویس انتخاب می کردم و دقیقا" می دونستم کدوم نقطه از HTML بایدآپدیت بشه و تا چه میزان و خوب این نکته ایی هست که در react به عنوان نقطه ضعف jquery ذکر می شه و به عنوان نقطه قوت react , اما توجه داشته باشید محاسبه نقطه آپدیت در jquery , هزینه اش از ذهن برنامه نویس هست و در react از CPU کاربر , پس شاید اساسا این نقطه قوت react در موارد اینترفیس های پیچیده و با مصرف بالای CPU همون پاشنه آشیل یا چشم اسفندیار react باشه.
و اساسا" آیا باید هزینه توسعه سریع و راحتی توسعه برای برنامه نویسان رو پای CPU کاربران نوشت ؟
خوب اجازه بدید من همین اول موضع نهایی خودم رو مشخص کنم , با این که این یک امتیاز منفی برای react هست ولی فیسبوک قول داده تا این نقطه ضعف رو مدام بهبود ببخشه و ماه عسل با react انقدر شیرین هست که بشه از این نکته منفی چشم پوشید.
اما ادامه داستان , بعد از اینکه سوالات "آخه مگه میشه یه کتابخانه جاوا اسکریپت اینقدر باهوش باشه ؟!" و "هزینه این باهوش بودن چقدر هست ؟!" و "'آیا هزینه این هوش بالا رو باید CPU کاربر بده ؟!" به ذهنم خطور کرد , یه جستجو در گوگل کردم و همون اولین لینک نگرانی من رو تایید می کرد. در این مقاله دقیقا" یه نمونه چارت ذکر شده که render کردنش مصرف CPU بالایی داره و تنها حرکت موس کاربر بر روی این چارت , می تونه متد render رو میلیون ها بار صدا بزنه !!
این نمونه مثال اول هست که می تونید خودتون تست کنید و در پایین چارت یک لیبل قرار داره که تعداد صدا زده شدن متد render رو نشون میده.
خوب همانطور که می دونید دو چیز باعث reRender شدن در کامپوننت های react می شوند , یکی تغییر در state و دیگری props , برای مطالعه بیشتر راجع به الگوریتم مقایسه و نحوه و درجه پیچیدگی اجرا , این مطلب رو حتما" مطالعه بفرمایید. در این مطلب توضیح داده شده که چطور خروجی فعلی با خروجی جدید به صورت یک tree از المان ها با هم مقایسه می شوند تا react متوجه شود آیا باید متد render مجددا فراخونی شود یا خیر ؟
علاوه بر موارد ذکر شده 2 مثال دیگر نیز ذکر شده است که با کمک مثال اول و دوم نشان داده می شود که عدم دقت در متد render می تونه باعث عدم عملکرد صحیح UI شود و دیگر بحث فراتر از مصرف CPU و کندی بلکه بر سر باگ می باشد .
اما راهکار این مقاله برای حل این مشکل استفاده از purecomponent به جای component معمولی بوده , کاری که purecomponent انجام می ده باز نویسی متد shouldcomponentupdate با استفاده از مقایسه عمیق state جاری با state جدید و props جاری با props جدید می باشد. تا متد render اجرای اضافی نداشته باشد , خروجی مثال دوم که با کمک purecomponent مشکل را حل کرده است .
همانطور که در عکس بالا مشاهده می کنید , میزان اجرای متد render با حرکت ماوس بر روی چارت اجرای بیهوده ندارد و فقط 4 بار اجرا شده است .طبق گفته فیسبوک shouldcomponentupdate در ورژن های آتی react از دسترسی برنامه نویس ها خارج و صرفا" باید از purecomponent استفاده نمود .
امیدوارم این مقاله کوتاه بتونه تا حدی پشت صحنه react رو برای شما شفاف تر کنه .
فایل های مرتبط با آموزش برای دانلود