روز دوم: React چگونه UI را به‌روزرسانی می‌کند

دیروز یاد گرفتم که React چه کاری انجام می‌دهد. امروز یاد گرفتم که چگونه آن را انجام می‌دهد.

قبلاً برایم سوال بود که React دقیقاً از کجا می‌داند چه چیزی را در UI تغییر دهد. اگر یک کلمه را در یک پاراگراف تغییر دهید، آیا React کل صفحه را دوباره می‌سازد؟ خیر. React از یک فرآیند هوشمند برای سریع ماندن استفاده می‌کند.

در اینجا جزئیات چرخه به‌روزرسانی React آمده است.

Reconciliation و Diffing

Reconciliation یک استراتژی است. Diffing روش اصلی انجام آن است. React درخت Virtual DOM جدید را با درخت قدیمی مقایسه می‌کند.

مقایسه دو درخت برای کامپیوترها کار سختی است. یک الگوریتم استاندارد بسیار کند است. React با در نظر گرفتن دو فرض، سرعت خود را حفظ می‌کند:

  • اگر نوع یک المان تغییر کند، React درخت قدیمی را از بین می‌برد و یک درخت جدید می‌سازد.
  • اگر نوع المان ثابت بماند، React فقط ویژگی‌های (attributes) تغییر یافته را به‌روزرسانی می‌کند.

این کار به React اجازه می‌دهد تا در زمان O(n) اجرا شود. این باعث می‌شود به‌روزرسانی‌ها آنی به نظر برسند.

دو مرحله

React کار خود را به دو مرحله متمایز تقسیم می‌کند:

  1. Render Phase این مرحله برنامه‌ریزی است. React کامپوننت‌های شما را فراخوانی کرده و تغییرات را محاسبه می‌کند. در این مرحله، React به Real DOM دست نمی‌زند. آن را مانند معمار در حال ترسیم نقشه ساختمان تصور کنید.

  2. Commit Phase این مرحله ساخت‌وساز است. React تغییرات محاسبه‌شده را روی Real DOM اعمال می‌کند. این بخش همگام (synchronous) است. وقتی شروع شود، تا زمانی که کار تمام نشود متوقف نمی‌شود.

نکته مهم: React ساختار DOM را به‌روزرسانی می‌کند، اما مرورگر پیکسل‌ها را ترسیم (paint) می‌کند. React ساختار را مدیریت می‌کند و مرورگر رندرینگ بصری را انجام می‌دهد.

React Fiber

قبل از React 16، رندرینگ همگام (synchronous) بود. اگر یک رندر زمان زیادی طول می‌کشید، مرورگر فریز می‌شد. شما نمی‌توانستید اسکرول کنید یا تایپ کنید.

Fiber این وضعیت را تغییر داد. Fiber موتور مدیریت‌کننده Render Phase است. این موتور به React اجازه می‌دهد تا:

  • کار را متوقف کرده و بعداً به آن بازگردد.
  • به‌روزرسانی‌های فوری مانند تایپ کردن کاربر را نسبت به داده‌های پس‌زمینه در اولویت قرار دهد.
  • کار را به بخش‌های کوچک تقسیم کند.

Virtual DOM یک ساختار داده است. Fiber الگوریتمی است که روی آن داده‌ها عمل می‌کند.

خلاصه جریان کار:

• تغییر State. • Render Phase: React تغییرات را از طریق Diffing برنامه‌ریزی می‌کند. • Commit Phase: React Real DOM را به‌روزرسانی می‌کند. • مرورگر: Layout، Paint و Composite. • پیکسل‌ها روی صفحه ظاهر می‌شوند.

منبع: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f