معماریِ فرانت‌اندِ یک صرافی کریپتوی بلادرنگ

مشکل "فقط استفاده از حالت"

کتاب سفارش زنده یک شلنگ آتش است. فریم‌های WebSocket 20 تا 40 بار در ثانیه در هر بازار می‌رسند، که هر کدام ساختار عمیق و مرتب‌شده‌ای را تغییر می‌دهند. آن را مستقیماً به حالت React وارد کنید و کل درخت را در هر تیک دوباره رندر کنید - زبانه گرم می‌شود، جابجا می‌شود و اعدادی که بیشتر به آنها نیاز دارید شروع به لکنت می‌کنند.

راه حل این است که وضعیت سوکت گذرا را از وضعیت سرور از وضعیت رابط کاربری جدا کنید، و به هر کدام خانه‌ای بدهید که با فرکانس به‌روزرسانی آن مطابقت داشته باشد.

سه فروشگاه، سه شغل

• Zustand عکس فوری سوکت زنده را در اختیار دارد - دفترچه سفارش، آخرین معاملات، علامت. خارج از چرخه رندر React زندگی می‌کند و از طریق setState به‌روزرسانی می‌شود، بدون اینکه کامپوننت‌هایی را که قسمت تغییر یافته را نمی‌خوانند مشترک شوند.
• React Query مالک همه چیز REST است: بازارها، موجودی‌ها، تاریخچه سفارش. ذخیره در حافظه پنهان، تلاش مجدد، و بازیابی پس‌زمینه به صورت رایگان ارائه می‌شوند.
• وضعیت مؤلفه محلی برای آنچه در آن خوب است باقی می‌ماند - باز کردن/بستن یک فهرست کشویی، محتوای یک ورودی.

انتخابگرها کل بازی هستند

ترفندی که آن را در سرعت 60 فریم بر ثانیه نگه می‌دارد: مؤلفه‌ها با یک بررسی برابری سفارشی در باریک‌ترین بخش ممکن فروشگاه مشترک می‌شوند، بنابراین تغییر قیمت در ردیف 14 هرگز ردیف 3 را بیدار نمی‌کند.

const bestBid = useBook(
  (s) => s.bids[0]?.price,
  shallow // only re-render when THIS value changes
);

زمان واقعی به معنای ارسال به‌روزرسانی‌های بیشتر به صفحه نیست. این در مورد فشار دادن کمترین به‌روزرسانی‌هایی است که هنوز به صورت فوری خوانده می‌شوند.

دسته بندی فریم ها، نه رندرها

حتی با انتخابگرهای عالی، فروشگاه 40 می نویسد یک ثانیه بیهوده است. من فریم‌های ورودی را در یک requestAnimationFrame یکپارچه می‌کنم - سوکت یک بافر را پر می‌کند، و UI آن را یک بار در هر رنگ تخلیه می‌کند. کتاب از نظر بصری زنده می ماند در حالی که کار واقعی React با یک مرتبه قدر کاهش می یابد.

نتیجه در Pooleno و ZarinBit: نمودار عمق ثابت 60 فریم بر ثانیه و دفترچه سفارش، حتی در لپ‌تاپ‌های میان رده، با CPU عمدتاً بین معاملات بیکار.