- جمعه ۷ آذر ۱۴۰۴
آزمایشگاه‌های ری‌اکت (بخش سوم)
امکان جدید اکتیویتی در ری‌اکت چیست؟
به‌روزرسانی اکتیویتی در ری‌اکت به شما امکان می‌دهد که وقتی کاربر صفحه را عوض می‌کند وضعیت را حفظ کنید تا وقتی دوباره به آن صفحه بازمی‌گردند همهٔ کارهایی که کرده است بازیابی شوند.
چکیده
اکتیویتی یک کامپوننت برای مخفی‌کردن و نشان‌دادن بخش‌هایی از UI است. امروز ما مفتخریم که مستندات مربوط به دو امکان جدید ری‌اکت را آمادهٔ تست هستند منتشر کنیم و آنها عبارت‌اند از:
- انتقال‌های نمایشی
- اکتیویتی
سایر امکانات جدیدی که در حال توسعهٔ آنها هستیم عبارت‌اند از
- React Performance Tracks
- Compiler IDE Extension
- Automatic Effect Dependencies
- Fragment Refs
- Concurrent Stores
اکنون دو امکان انتقال‌های نمایشی و اکتیویتی برای آزمایش در react@experimental موجود هستند. این امکانات در محیط عملیاتی آزمایش شده‌اند و پایدار هستند، اما API نهایی ممکن است براساس بازخوردها تغییر کند. می‌توانید با ارتقای بستهٔ ری‌اکت به جدیدترین نسخهٔ آزمایشی این امکانات را امتحان کنید:
- react@experimental
- react-dom@experimental
در این سری مطالب نحوهٔ استفاده از این امکانات را توضیح می‌دهیم و اسناد تازه‌منتشرشده را بررسی می‌کنیم. در بخش نخست آزمایشگاه‌های ری‌اکت دربارهٔ انتقال‌های نمایشی در ری‌اکت صحبت کردیم. در بخش دوم آزمایشگاه‌های ری‌اکت به سفارشی‌سازی انیمیشن پرداختیم و از آنجا بحث دربارهٔ انتقال‌های نمایشی را ادامه دادیم. در این مطلب در مورد امکان جدید اکتیویتی صحبت می‌کنیم.
ReactJS یا ری‌اکت یکی از محبوب‌ترین فریم‌ورک‌های کتابخانهٔ جاوا اسکریپت برای ساخت رابط‌های کاربری پویا و جذاب است. با توجه به ویژگی‌های این فریم‌ورک، فرصت‌های شغلی زیادی برای استخدام متخصصان این حوزه وجود دارد. دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران با برگزاری دوره ری اکت این امکان را فراهم کرده تا شما بتوانید تجربه‌‌ای خاص و کاربردی برای کاربران ایجاد کنید و عملکرد اپلیکیشن‌ها را بهبود بخشید. افرادی که قصد دارند در دوره آموزشreactjs شرکت کنند باید آموزش طراحی وب سایت را گذرانده باشند. در غیر این صورت درک مباحث دورهٔ ری‌اکت برای آنها دشوار خواهد بود.
اکتیویتی: امکان جدید ری‌اکت
در به‌روزرسانی‌های قبلی گفتیم که در حال تحقیق دربارهٔ یک API هستیم که امکان دهد کامپوننت‌ها را مخفی کرده و اولویت آنها را برطرف کنیم و در عین حال وضعیت UI را حفظ کنیم به‌طوری که هزینه‌های عملکرد در مقایسه با مخفی‌کردن CSS یا پایین‌آوردن آن کمتر باشد. اکنون آماده هستیم که آن API را منتشر کنیم و بگوییم چطور کار می‌کند تا بتوانید آن را در نسخه‌های آزمایشی ری‌اکت تست کنید.
وقتی اکتیویتی visible باشد، به‌طور طبیعی کار می‌کند. اگر اکتیویتی hidden باشد فعال نیست، اما همچنان وضعیت را حفظ می‌کند و رندر را به‌شکلی با اولویت کمتری نسبت به چیزهایی که در صفحه آشکار کردند ادامه می‌دهد. می‌توانید اکتیویتی را برای ذخیرهٔ وضعیت بخش‌های UI که کاربر از آنها استفاده نمی‌کند به کار ببرید. همچنین می‌توانید برای رندر پیشینی بخش‌هایی که کاربر ممکن است بعدتر به آنها نیاز پیدا کند استفاده کنید. در ادامه به برخی از نمونه‌های به‌روزرسانی View Transition در این حوزه می‌پردازیم.
توجه کنید که افکت‌ها وقتی اکتیویتی مخفی باشد فعال نمی‌شوند. وقتی
بازگرداندن وضعیت با اکتیویتی
وقتی کاربر از صفحه‌ای به صفحهٔ دیگر می‌رود، اغلب رندر صفحهٔ قبلی متوقف می‌شود.
function App() {
const { url } = useRouter();
return (
<>
{url === '/' &&
{url !== '/' &&
);
}
با این حال معنایش این است که اگر کاربر به صفحهٔ قبلی بازگردد، همهٔ وضعیت‌های قبلی از دست می‌روند. برای نمونه، اگر صفحهٔ
به‌روزرسانی اکتیویتی به شما امکان می‌دهد که وقتی کاربر صفحه را عوض می‌کند وضعیت را حفظ کنید تا وقتی دوباره به آن صفحه بازمی‌گردند همهٔ کارهایی که کرده است بازیابی شوند. این کار از طریق قراردادن بخشی از درخت در
function App() {
const { url } = useRouter();
return (
<>
{url !== '/' &&
);
}
با این تغییر می‌توانیم مثال خود را که در مقالات پیشین این مجموعه مطرح کردیم و مربوط به انتقال‌های نمایشی بود ارتقا دهیم. پیشتر وقتی به دنبال یک ویدیو بودید، یکی را انتخاب می‌کردید و بعد از آن به صفحهٔ عقب بازمی‌گشتید، فیلترهای جستجوی شما از دست می‌رفتند. با امکان اکتیویتی فیلترهای جستجو بازمی‌گردند و می‌توانید از همان‌جایی که پیشتر بودید ادامه دهید. در این مثال یک ویدیو جستجو کنید، آن را انتخاب کنید و سپس روی دکمهٔ Back کلیک کنید:
- import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
- export default function App() {
- const { url } = useRouter();
- return (
- // View Transitions know about Activity
-
- {/* Render Home in Activity so we don't lose state */}
-
-
- {url !== '/' &&}
- );
- }
توجه داشته باشید که به دلیل محدودیت این مقاله صرفاً کدهای پایهٔ App.js در اینجا آمده‌اند و برای مشاهدهٔ سایر کدها ازجمله موارد زیر از طریق لینک پایین مقاله به خود آن مراجعه کنید.
Details.js, Home.js, Layout.js, Videos.js, router.js, animations.css
پری-رندر با امکان اکتیویتی در ری‌اکت
گاه شما می‌خواهید بخش بعدی UI را که کاربر ممکن است از آن استفاده کند از پیش آماده کنید تا وقتی که کاربر بخواهد از آن استفاده کند آماده باشد. این کار به‌ویژه در صورتی مفید است که روت بعدی بخواهد داده‌هایی که لازم است رندر کند در حالت تعلیق نگه دارد، تا داده‌ها پیش از آنکه کاربر آنها را بررسی کند آماده باشند. برای نمونه، اپلیکیشن مثالی ما در حال حاضر باید از تعلیق استفاده کند تا بتواند داده‌های هر یک از ویدیوهایی را که شما انتخاب می‌کنید بارگذاری کند. می‌توانیم این کار را از طریق رندر همهٔ صفحات در یک اکتیویتی مخفی بهبود ببخشیم تا زمانی که کاربر به سراغ آنها برود:
با این به‌روزرسانی در ری‌اکت اگر محتوای صفحهٔ بعد زمان کافی برای پری-رندر را داشته باشد، آن را بدون مشکلی در Suspense متحرک‌سازی می‌کند. بر روی یک ویدیو کلیک کنید و توجه کنید که عنوان و شرح ویدیو در صفحهٔ جزئیات بلافاصله رندر می‌شود.
- import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'
- export default function App() {
- const { url } = useRouter();
- const videoId = url.split("/").pop();
- const videos = use(fetchVideos());
- return (
-
- {/* Render videos in Activity to pre-render them */}
- {videos.map(({id}) => (
-
-
- ))}
-
-
- );
- }
در بخش چهارم این سری مطالب یعنی آزمایشگاه ری‌اکت (بخش چهارم) بحث اکتیویتی را ادامه می‌دهیم و به سایر امکانات جدید ری‌اکت می‌پردازیم.
جمع‌‌بندی
وقتی اکتیویتی visible باشد، به‌طور طبیعی کار می‌کند. اگر اکتیویتی hidden باشد فعال نیست، اما همچنان وضعیت را حفظ می‌کند و رندر را به‌شکلی با اولویت کمتری نسبت به چیزهایی که در صفحه آشکار کردند ادامه می‌دهد. می‌توانید اکتیویتی را برای ذخیرهٔ وضعیت بخش‌های UI که کاربر از آنها استفاده نمی‌کند به کار ببرید. همچنین می‌توانید برای رندر پیشینی بخش‌هایی که کاربر ممکن است بعدتر به آنها نیاز پیدا کند استفاده کنید. توجه کنید که افکت‌ها وقتی اکتیویتی مخفی باشد فعال نمی‌شوند. وقتی
در این سری مطالب نحوهٔ استفاده از این امکانات را توضیح می‌دهیم و اسناد تازه‌منتشرشده را بررسی می‌کنیم. در بخش نخست آزمایشگاه‌های ری‌اکت دربارهٔ انتقال‌های نمایشی در ری‌اکت صحبت کردیم. در بخش دوم آزمایشگاه‌های ری‌اکت به سفارشی‌سازی انیمیشن پرداختیم و از آنجا بحث دربارهٔ انتقال‌های نمایشی را ادامه دادیم. در این مطلب در مورد امکان جدید اکتیویتی صحبت می‌کنیم. در بخش چهارم این سری مطالب یعنی آزمایشگاه ری‌اکت (بخش چهارم) بحث اکتیویتی را ادامه می‌دهیم و به سایر امکانات جدید ری‌اکت می‌پردازیم.
ReactJS یا ری‌اکت یکی از محبوب‌ترین فریم‌ورک‌های کتابخانهٔ جاوا اسکریپت برای ساخت رابط‌های کاربری پویا و جذاب است. با توجه به ویژگی‌های این فریم‌ورک، فرصت‌های شغلی زیادی برای استخدام متخصصان این حوزه وجود دارد. دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران با برگزاری دوره ری اکت این امکان را فراهم کرده تا شما بتوانید تجربه‌‌ای خاص و کاربردی برای کاربران ایجاد کنید و عملکرد اپلیکیشن‌ها را بهبود بخشید. افرادی که قصد دارند در دوره آموزشreactjs شرکت کنند باید آموزش طراحی وب سایت را گذرانده باشند. در غیر این صورت درک مباحث دورهٔ ری‌اکت برای آنها دشوار خواهد بود.
در دنیای کسب‌وکار امروز، تحصیلات دانشگاهی برای حفظ ارزش شما به‌عنوان نیروی کار بااستعداد و کارآمد کافی نیستند. برای اینکه مزیت رقابتی شخصی خود را حفظ کنید، باید بر آموزش مستمر و مادام‌العمر خود سرمایه‌گذاری کنید. خانواده بزرگ مجتمع فنی تهران هرساله به هزاران نفر کمک می‌کند تا در مسیر شغلی خود پیشرفت کنند.
اگر شاغل هستید و وقت ندارید در دوره‌های آموزشی حضوری شرکت کنید، مجتمع فنی تهران گزینه‌هایی عالی برای آموزش مجازی، آنلاین، آفلاین و ترکیبی ارائه می‌دهد. با شرکت در دوره‌های کوتاه‌مدت مجتمع فنی تهران و دریافت مدارک معتبر و بین‌المللی می‌توانید با اعتماد به نفس مسیر ترقی را طی کنید و در سازمان خود به مهره‌ای ارزشمند تبدیل شود.
نویسنده: ریکی هانلون
مترجم: بهناز دهکردی
منبع: React.dev
پرسش‌های متداول
ری‌اکت چیست؟
ری‌اکت گه با نام‌های React.js و ReactJS نیز شناخته می‌شود یک کتابخانهٔ رایگان و متن باز است که از جاوا اسکریپت استفاده می‌کند و برای فرانت‌اند مورد استفاده قرار می‌گیرد. هدف ری‌اکت ساده‌تر و ران‌ترکردن ساخت رابط‌های کاربری است که مبتنی بر کامپوننت باشند. این کتابخانه را شرکت متا یا همان فیسبوک سابق ساخته است و توسعه‌دهندگان مستقل با آن همکاری و در نگهداری و پشتیبانی از آن کمک می‌کنند.
اکتیویتی ری‌اکت چیست؟
امکانات جدید ری‌اکت در ترنزیشن کدام‌اند؟
- <ViewTransition> کامپوننتی است که به شما امکان می‌دهد یک انیمیشن را برای ترنزیشن یا انتقال فعال کنید.
- addTransitionType: تابعی است که به شما امکان می‌دهد علت ترنزیشن را مشخص کنید.
- <Activity> کامپوننتی است که به شما امکان می‌دهد بخش‌هایی از رابط کاربری را پنهان یا آشکار کنید.
