آزمایشگاه‌های ری‌اکت (بخش نخست)

انتقال‌های نمایشی، اکتیویتی و سایر ویژگی‌های جدید ری‌اکت

 انتقال‌های نمایشی جدید ری‌اکت برای ترنزیشن‌های رابط کاربری مانند ناوبری، گسترش، بازکردن یا مرتب‌سازی مجدد مورد استفاده قرار می‌گیرند و نمی‌توانند جایگزین همهٔ‌ انیمیشن‌ها برنامهٔ شما شوند.

چکیده

در این مطلب در مورد پروژه‌های فعال در بخش تحقیق و توسعهٔ ری‌اکت صحبت می‌کنیم. به دو ویژگی جدید ری‌اکت اشاره خواهیم کرد که اکنون آمادهٔ آزمایش هستند. همچنین به‌روزرسانی سایر حوزه‌هایی را که مشغول کار در آنها هستیم منتشر می‌کنیم. امروز ما مفتخریم که مستندات مربوط به دو امکان جدید ری‌اکت را آمادهٔ تست هستند منتشر کنیم و آنها عبارت‌اند از:

• انتقال‌های نمایشی
• اکتیویتی

سایر امکانات جدیدی که در حال توسعهٔ آنها هستیم عبارت‌اند از

• React Performance Tracks
• Compiler IDE Extension
• Automatic Effect Dependencies
• Fragment Refs
• Concurrent Stores

در بخش دوم آزمایشگاه‌های ری‌اکت به سفارشی‌سازی انیمیشن می‌پردازیم و از آنجا بحث دربارهٔ انتقال‌های نمایشی را ادامه می‌دهیم.

ReactJS یا ری‌اکت یکی از محبوب‌ترین فریم‌ورک‌های کتابخانهٔ جاوا اسکریپت برای ساخت رابط‌های کاربری پویا و جذاب است. با توجه به ویژگی‌های این فریم‌ورک، فرصت‌های شغلی زیادی برای استخدام متخصصان این حوزه وجود دارد. دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران با برگزاری دوره ری اکت این امکان را فراهم کرده تا شما بتوانید تجربه‌‌ای خاص و کاربردی برای کاربران ایجاد کنید و عملکرد اپلیکیشن‌ها را بهبود بخشید. افرادی که قصد دارند در دوره آموزشreactjs  شرکت کنند باید  آموزش طراحی وب سایت را گذرانده باشند. در غیر این صورت درک مباحث دورهٔ ری‌اکت برای آنها دشوار خواهد بود.

امکانات آزمایشی جدید ری‌اکت

اکنون دو امکان انتقال‌های نمایشی و اکتیویتی برای آزمایش در react@experimental موجود هستند. این امکانات در محیط عملیاتی آزمایش شده‌اند و پایدار هستند، اما API نهایی ممکن است براساس بازخوردها تغییر کند. می‌توانید با ارتقای بستهٔ ری‌اکت به جدیدترین نسخهٔ آزمایشی این امکانات را امتحان کنید:

• react@experimental
• react-dom@experimental

در ادامهٔ این مطلب نحوهٔ‌ استفاده از این امکانات را توضیح می‌دهیم و اسناد تازه‌منتشرشده را بررسی می‌کنیم.

• <ViewTransition> کامپوننتی است که به شما امکان می‌دهد یک انیمیشن را برای ترنزیشن یا انتقال فعال کنید.
• addTransitionType: تابعی است که به شما امکان می‌دهد علت ترنزیشن را مشخص کنید.
• <Activity> کامپوننتی است که به شما امکان می‌دهد بخش‌هایی از رابط کاربری را پنهان یا آشکار کنید.

انتقال‌های نمایشی

انتقال‌های نمایشی ری‌اکت (React View Transitions) یک امکان آزمایشی جدید است که افزودن انیمیشن را به ترنزیشن‌های رابط کاربری برنامه آسان‌تر می‌دهد. این انیمیشن‌ها در اصل از API جدید startViewTransition استفاده می‌کنند که در اکثر مرورگرهای جدید موجود است. برای انتخاب حالت انیمیشن‌های یک عنصر آن را در کامپوننت جدید <ViewTransition> قرار دهید:

// "what" to animate.

این کامپوننت جدید به شما امکان می‌دهد که تعریف کنید هنگام فعال‌شدن انیمیشن «چه چیز» متحرک شود. همچنین می‌توانید با استفاده از یکی از این سه تریگر در بخش انتقال‌های نمایشی تعریف کنید که متحرک‌سازی «چه زمانی» انجام شود:

// "when" to animate.

// Transitions

startTransition(() => setState(...));

// Deferred Values

const deferred = useDeferredValue(value);

// Suspense

}>

به‌طور پیش‌فرض این انیمیشن‌ها از انیمیشن‌های پیش‌فرض CSS برای انتقال‌های نمایشی اعمال‌شده استفاده می‌کنند که معمولاً شامل محوشدن متقاطع و نرم است. می‌توانید از شبه‌انتخابگرهای انتقال‌ نمایشی برای تعریف «چگونگی» اجرای انیمیشن استفاده کنید. برای نمونه،‌ می‌توانید از * برای تغییر انیمیشن پیش‌فرض در همهٔ انتقال‌ها استفاده کنید.

// "how" to animate.

::view-transition-old(*) {

  animation: 300ms ease-out fade-out;

}

::view-transition-new(*) {

  animation: 300ms ease-in fade-in;

}

وقتی مدل شیءگرای سند یا DOM به واسطهٔ یک تریگر انیمیشن مانند startTransition، useDeferredValue یا تغییر محتوا توسط Suspense به‌روزرسانی می‌شود، ری‌اکت از روش اکتشاف اعلانی استفاده می‌کند تا به‌طور خودکار اجرای <ViewTransition> را تعیین کرده و انیمیشن را فعال کند. سپس مرورگر انیمیشنی را که در CSS تعریف شده اجرا می‌کند.

اگر با View Transition API در مرورگر آشنا هستید و می‌خواهید بدانید ری‌اکت چگونه آن را پشتیبانی می‌کند به مطلب مربوط به «نحوهٔ کار <ViewTransition> در اسناد» مراجعه کنید.

در ادامه چند مثال از نحوهٔ استفاده از View Transitions مطرح می‌کنیم. با برنامه‌ای آغاز می‌کنیم که هیچ‌یک از تعاملات زیرا را متحرک‌سازی یا انیمیشن‌سازی نمی‌کند.

• برای مشاهدهٔ جزئیات روی ویدیو کلیک کنید.
• برای بازگشت به مطلب کلید «بازگشت» را فشار دهید.
• برای فیلترکردن ویدیوها در فهرست تایپ کنید.

1 import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';

2

3 export default function App() {

4   const {url} = useRouter();

5

 6  // 🚩This version doesn't include any animations yet

7  return url === '/' ? : ;

8 }

9

توجه داشته باشید انتقال‌های نمایشی یا View Transitions جایگزین انیمیشن‌های CSS و JS نمی‌شوند. انتقال‌های نمایشی برای ترنزیشن‌های رابط کاربری مانند ناوبری، گسترش، بازکردن یا مرتب‌سازی مجدد مورد استفاده قرار می‌گیرند و نمی‌توانند جایگزین همهٔ‌ انیمیشن‌ها برنامهٔ شما شوند. فرض کنید برنامهٔ شما چند ویدیو نمایش می‌دهد که در کنار هر کدام یک گزینهٔ لایک قرار دارد. توجه داشته باشید که در این برنامه وقتی روی دکمهٔ لایک کنار هر ویدیو کلیک می‌کنید و در درخشش Suspense پیشاپیش انیمیشن‌هایی وجود دارد. اینها نمونه‌های استفاده از انیمیشن‌های CSS هستند، زیرا یک عنصر خاص را متحرک‌سازی می‌کنند.

متحرک‌سازی ناوبری‌ها

برنامهٔ مورد نظر ما شامل یک روتر با قابلیت Suspense است که انتقال صفحه در آن از قبل با عنوان Transitions علامت‌گذاری شده است. این بدان معناست که ناوبری‌ها با startTransition انجام می‌شوند:

function navigate(url) {

  startTransition(() => {

    go(url);

  });

}

startTransition یک تریگر View Transition است. بنابراین می‌توانیم <ViewTransition> را برای متحرک‌سازی حرکت بین صفحات به آن اضافه کنیم:

// "what" to animate

  {url === '/' ? : }

وقتی آدرس URL تغییر می‌کند، <ViewTransition> و مسیر جدید رندر می‌شوند. ازآنجایی که <ViewTransition> درون startTransition به‌روزرسانی شده است، <ViewTransition> برای انیمیشن فعال می‌شود.

به‌طور پیش‌فرض انتقال‌های نمایشی شامل انیمیشن‌های محوشونده و متقاطع هستند که پیش‌فرض مرورگرند. با اضافه‌کردن آن در مثال خود هر بار که بین صفحات حرکت می‌کنیم، محوشدگی متقاطع خواهیم داشت:

1 import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';

2

3 export default function App() {

4  const {url} = useRouter();

5

6 // Use ViewTransition to animate between pages.

7 // No additional CSS needed by default.

8 return (

9  

10      {url === '/' ? :