در React، آشتی فرآیند مقایسه نمایش مجازی حالت قبلی یک مؤلفه با وضعیت جدید آن، و تعیین حداقل مجموعه تغییرات مورد نیاز برای به روز رسانی کارآمد رابط کاربری است. به این صورت است که React متوجه می‌شود که چه بخش‌هایی از رابط کاربری باید به‌روزرسانی شوند، وقتی وضعیت یا ویژگی‌های یک جزء تغییر می‌کند.
در اینجا توضیح گام به گام فرآیند آشتی در React آمده است:
Virtual DOM: React از یک نمایش مجازی از DOM به نام Virtual DOM استفاده می کند. این یک کپی سبک از DOM واقعی است.
Render: هنگامی که وضعیت یا props یک کامپوننت تغییر می کند، React کامپوننت را دوباره رندر می کند و یک نمایش مجازی جدید از رابط کاربری مؤلفه ایجاد می کند.
Diffing: React نمایش مجازی قبلی (از رندر قبلی) و نمایش مجازی جدید (از رندر فعلی) را می گیرد و فرآیندی به نام “diffing” را انجام می دهد. تفاوت شامل مقایسه این دو نمایش و شناسایی تفاوت های بین آنها است.
استراتژی به روز رسانی: React از یک استراتژی به روز رسانی کارآمد بر اساس فرآیند متفاوت استفاده می کند. هدف آن به حداقل رساندن تعداد تغییرات واقعی ایجاد شده در DOM واقعی تنها با اعمال به‌روزرسانی‌های لازم است.
Reconciliation: هنگامی که React تفاوت بین نمایش های مجازی قبلی و جدید را شناسایی کرد، به روز رسانی های لازم را در DOM واقعی انجام می دهد تا تغییرات را منعکس کند. به این فرآیند آشتی می گویند.
در طول آشتی، React از چند اصل برای بهینه‌سازی فرآیند به‌روزرسانی پیروی می‌کند:
- عناصر از انواع مختلف متفاوت در نظر گرفته می شوند و به طور کامل از ابتدا بازسازی می شوند.
- React سعی می‌کند در صورتی که کامپوننت‌ها از نوع مشابهی باشند، به روز رسانی کند.
- React از یک “کلید” در لیست عناصر برای بهبود کارایی به‌روزرسانی‌ها استفاده می‌کند.
با پیروی از این اصول، React تضمین می‌کند که رابط کاربری با وضعیت و اجزای کامپوننت همگام باقی می‌ماند و در عین حال دستکاری‌های غیرضروری DOM را به حداقل می‌رساند و در نتیجه عملکرد بهتری دارد.
آشتی یک مفهوم اصلی در React است، اما نیازی نیست که در توسعه روزمره خود زیاد نگران آن باشید. الگوریتم تطبیق React بسیار بهینه شده است و اکثر موارد را به طور موثر مدیریت می کند. با این حال، درک اصول تطبیق می‌تواند به شما در نوشتن مؤلفه‌های React کارآمدتر و بهینه‌تر در هنگام کار با برنامه‌های بزرگتر کمک کند.
