آیا تا به حال در یک نوار جستجو در یک برنامه React تایپ کرده اید ، فقط برای اینکه احساس کنید کلیدهای شما عقب مانده است؟ شاید شما یک ویژگی را ایجاد کرده باشید که UI نیاز به فیلتر یا نمایش لیست بزرگی از موارد در زمان واقعی داشته باشد – و ناگهان ، همه چیز احساس کند و پاسخگو نیست.
این فقط برای کاربران ناامید کننده نیست – این برای توسعه دهندگان ناامید کننده است. از این گذشته ، React برای روزه بودن شناخته شده است ، درست است؟
در اینجا مشکل وجود دارد: React با تمام به روزرسانی ها به طور پیش فرض ، خواه یک ورودی سریع متن باشد یا یک لیست پیچیده. این بدان معناست که وقتی برنامه شلوغ می شود – به ویژه با اجزای سنگین – تجربه کاربر شروع به رنج می کند.
اما اینجا جایی است که جادوی واکنش مدرن وارد می شود.
در سال 2022 ، React 18 قلاب جدیدی به نام MeedEferredValue را معرفی کرد – ابزاری قدرتمند که برای پاسخگویی برنامه شما طراحی شده است ، حتی اگر این کار را در پشت صحنه انجام دهد. این باعث می شود سریعتر رندر شود ، اما باعث می شود برنامه با به روزرسانی هوشمندانه به روزرسانی های غیر بحرانی ، سریعتر احساس شود.
در این پست ، ما قصد داریم آنچه را که بیشتر توسعه دهندگان از آن غافل می شوند ، کشف کنیم استفاده شده، چگونه در واقع کار می کند ، و چگونه می توانید از آن برای صاف کردن UI خود استفاده کنید بدون اینکه کل برنامه خود را بازنویسی کنید.
بیایید آن را تجزیه کنیم.
1. این یک تقویت کننده عملکرد نیست – این یک تقویت کننده است
بیایید این را مستقیم بگیریم:
- این برنامه شما را سریعتر نمی کند.
- این باعث کاهش بار کاری ارائه نمی شود.
- هیچ محاسباتی را رد نمی کند.
کاری که انجام می دهد این است که برنامه خود را تهیه کنید احساس سریعتر با اجازه واکنش در اولویت بندی موارد مهم: ورودی کاربر.
به این شکل فکر کنید:
به جای اینکه موتور سریعتر کار کند ، شما فقط از راه راننده خارج می شوید.
برنامه شما هنوز پردازش مجدد لیست فیلتر شده را پردازش می کند ، اما منتظر می ماند تا React کارهای فوری را انجام داده باشد ، مانند شخصیت بعدی که کاربر را تایپ می کند.
2.. این کار را انجام می دهد – آن را لغو نمی کند
هنگام استفاده استفاده شده، شما می گویید React:
“سلام ، این ارزش اهمیت دارد – اما همه چیز را برای به روزرسانی در حال حاضر رها نکنید.”
React آن سیگنال را می گیرد و تا زمانی که به روزرسانی های فوری بیشتری را به پایان برساند ، به اجزای وابسته می پردازد.
مهم:
کار هنوز هم اتفاق می افتد. شما از هزینه اجتناب نمی کنید – شما آن را مجدداً تنظیم می کنید.
3. این باعث بهبود پاسخگویی درک شده می شود.
React فقط هدف اصلی ارائه سریعتر نیست. این هدف برای تعامل نرم تر است.
اینجاست که استفاده می شود. حتی اگر مؤلفه شما هنوز 300 متر طول بکشد ، کاربر آن تأخیر را احساس نمی کند – زیرا ورودی آنها واضح ، فوری و بدون انسداد باقی مانده است.
این تغییر از عملکرد فنی به عملکرد کاربربشر و این یک بزرگ است.
4. بیشتر نسخه های نمایشی برای نشان دادن قدرت واقعی خود بسیار کوچک هستند
آموزش های بی شماری را پیدا خواهید کرد که با یک نوار جستجوی کوچک و لیستی از 50 مورد استفاده شده است. برای یادگیری جالب است؟ مطمئناً اما در برنامه های واقعی؟
شما می خواهید هنگام برخورد با این کار از این استفاده کنید:
- 10،000+ مورد در یک کاتالوگ قابل فیلتر
- داشبورد داده در زمان واقعی
- تجسم نمودار بر اساس ورودی کاربر
- پیش نمایش های زنده از Markdown ، Code یا Elements Design
اینجاست که این قلاب ارزش خود را اثبات می کند.
5. سوء استفاده و سوءاستفاده آسان است
در اینجا یک داستان مشترک وجود دارد:
- یک dev یک مقدار را با استفاده از eferredvalue می پیچد
- هیچ چیز تغییر نمی کند
- آنها فرض می کنند قلاب بی فایده است
اما آنچه اغلب از دست می رود زمینه است:
- آیا شما چیزی را به اندازه کافی گران می کنید که اهمیت داشته باشد؟
- آیا برای جلوگیری از محاسبات غیر ضروری از usememo یا react.memo استفاده می کنید؟
- آیا برای فعال کردن رندر همزمان از Reactdom.CreaterOt () استفاده می کنید؟
بدون آن ، استفاده شده به واسطه کمک نمی کند – و این تقصیر هوک نیست.
خلاصه
اگر برنامه React شما در حین ورودی کاربر احساس کندی می کند – به خصوص هنگام ارائه لیست های بزرگ یا اجزای پیچیده – شما تنها نیستید. این تاخیر معمولاً ناشی از درمان همه به روزرسانی ها به صورت فوری است ، حتی اگر نیازی به این نباشد.
قلاب React 18's MeedEferredValue برای کمک به شما در اینجا است. این سرعت رندر را سرعت نمی بخشد-این باعث می شود که برنامه شما با به روزرسانی به روزرسانی های غیر فوری تا زمانی که تعامل کاربر انجام شود ، سریعتر احساس شود.
در این پست ، ما را پوشش دادیم:
- چرا استفاده شده از eferredvalue پاسخگویی درک شده را افزایش می دهد ، نه سرعت واقعی
- چگونه به آن اجازه می دهد در حالی که به تعویق می اندازد ، در اولویت قرار دادن ورودی کاربر را در اولویت قرار دهد
- اشتباهات رایج در هنگام استفاده از آن – و نحوه جلوگیری از آنها
- سناریوهای دنیای واقعی که این قلاب واقعاً می درخشد (اشاره: نه فقط برنامه های کوچک برای انجام کارها)
اگر UI شما تحت فشار احساس کندی می کند ، استفاده شده ممکن است ساده ترین راه برای ارائه یک تجربه نرم و نرم و نرم تر باشد – بدون این که کل برنامه شما را بازنگری کند.
