‏ری‌اکت ۱۹.۳ منتشر شد؛ View Transitions حالا رسمیه

تیم ری‌اکت نسخه ۱۹.۳ رو منتشر کرده و دو ویژگی که سال قبل به‌صورت آزمایشی معرفی شده بودن حالا رسمی و پایدار شدن: View Transitions (برای انیمیت کردن ورود، خروج، جابه‌جایی و تغییر اندازه‌ی المان‌ها با کمک view transition API خود مرورگر) و Fragment Refs.

برای انیمیت کردن یه بخش از رابط کاربری، فقط کافیه اون رو تو کامپوننت جدید ViewTransition بپیچی. ری‌اکت بر اساس نوع تغییر، یکی از چهار حالت enter، exit، update یا share رو انتخاب می‌کنه و انیمیشن رو خودکار اجرا می‌کنه، اونم فقط وقتی تغییر داخل یه Transition (یعنی به کمک startTransition) اتفاق بیفته:

import { ViewTransition } from 'react';

{isShowing && (
  <ViewTransition>
    <Component />
  </ViewTransition>
)}

یه قابلیت جالب دیگه، تابع addTransitionTypeـه که می‌ذاره بر اساس دلیل تغییر (مثلاً رفتن به اسلاید بعدی یا قبلی تو یه کاروسل) انیمیشن‌های متفاوتی تعریف کنی، حتی اگه دو بار state یکسانی تغییر کرده باشه. جالب‌تر اینکه ViewTransition با Suspense هم کار می‌کنه؛ وقتی محتوای یه Suspense boundary لود بشه، ری‌اکت خودش انیمیشن رد شدن از fallback به محتوای اصلی رو اجرا می‌کنه.

تو ری‌اکت DOM هم چند تغییر اومده، از جمله پشتیبانی از Trusted Types (برای جلوگیری از حملات XSS تو مرورگرهایی که ازش پشتیبانی می‌کنن). تو React Server Components هم حالا می‌شه رو مستقیم تو یه کامپوننت سروری رندر کرد.

نکات کلیدی:

• و Fragment Refs از حالت آزمایشی خارج شدن و تو نسخه ۱۹.۳ پایدارن
• انیمیشن‌ها فقط برای تغییرات داخل Transition اجرا می‌شن، نه آپدیت‌های فوری
• فعلاً فقط تو DOM کار می‌کنه؛ پشتیبانی از React Native هنوز در راهه
• addTransitionType امکان انیمیشن متفاوت بر اساس جهت یا دلیل تغییر رو می‌ده
• Trusted Types حالا تو ری‌اکت DOM پشتیبانی می‌شه