Frontend Developer at Delino
حذف render اضافی کامپوننتهای ریاکت با batch
ممکنه به ری رندهای اضافهای که توی کامپوننتهاتون هر بار داره رخ میده خیلی دقت نکرده باشین، ولی اینو بدونین که اگه دو تا useState رو پشت سر هم صدا بزنین، اولی اجرا میشه، بعد کامپوننت ری رندر میشه و بعد دومی اجرا میشه و باز کامپوننت رو مجددا ری رندر میکنه، خب راه حلهای مختلفی واسه افزایش پرفرمنس این موضوع وجود داره.
یک سری افراد هنوز دید state کلاس کامپوننتها رو دارن و با hook غریبن و میگن state هاتونو اینطوری تعریف کنین.
یک سری افراد هم میگن از useReducer استفاده کنین که احساس میکنم همون داستان بالا میشه
من این مشکل رو قبلا توی dispatch کردن ریداکس داشتم که در انتها راه حل اونم با مثال اوردم، ولی بعد از صحبت با ادی متوجه شدم که این API اول واسه خود react بوده و بعداْ ریداکس ازش استفاده کرده، به این شکل که ReactDOM یه API واسه این کار نوشته که طرز استفادش به شکل زیره که هر چندتا setState ای که میخوایی همزمان با هم اجرا کنی و در نهایت یکبار کامپوننتت ری رندر بشه رو توی کال بک این API باید بنویسی.
فقط یه نکته اینکه این API الان unstable عه و ممکنه توی نسخههای بعدی حذف بشه و به خود react core اضافه بشه، پس بهتره یه جای دیگه مثلا توی helper هامون واسش یه فانکشن تعریف کنیم، تا هر موقع حذف شد و جایگزینش API دیگه ای نوشته شد، تنها اون helper رو آپدیت کنیم.
اگه از ریداکس استفاده میکنید اونجا هم batch رو داریم، این زیر یه مثال ازش زدم.
اون useDispatch و useSelector هم اگه واستون جدیده همینجا توی ویرگول راجبش یه مقاله نوشتم.
مطلبی دیگر از این انتشارات
از React تا گوگل - قسمت دوم
مطلبی دیگر از این انتشارات
یه نکتهی جالب راجع به arrow functionها در کلاس کامپوننتهای ریاکت
مطلبی دیگر از این انتشارات
نگاهی به نسخه جدید ریاکت ۱۶.۶ و نسخه آینده آن