در این مقاله، سه مورد استفاده برای کار با React Intersection Observer را تحلیل می‌کنیم: بارگذاری تنبل، اسکرول بی‌نهایت، و محرک‌های انیمیشن/گذر.

React Intersection Observer به نظارت بر تغییرات در نمای یک عنصر در برنامه شما کمک می کند. ناظر تقاطع زمانی را تشخیص می دهد که یک عنصر خاص با عنصر دیگری تلاقی می کند. این کار با تنظیم تابع callback به گونه ای کار می کند که هر زمان که عنصر هدف با viewport تعامل داشته باشد اجرا شود.

این یک راه حل زیبا برای کنترل دید عناصر و کمک به شما در ایجاد برنامه های کاربردی پویا ارائه می دهد.

از مورد 1 استفاده کنید: بارگذاری تنبل برای بهبود عملکرد

بارگذاری تنبل تکنیکی است برای به تعویق انداختن رندر کردن اجزای کمتر حیاتی (داده ها، کد، تصاویر، ویدئوها)، عمدتاً در مواردی که بارگیری همه چیز از ابتدا برای عملکرد مضر است و منجر به کاهش حیاتی وب اصلی می شود. این می تواند زمان بارگذاری صفحه را به طور قابل توجهی بهبود بخشد، به خصوص برای وب سایت های پر محتوا.

به زبان ساده، بارگذاری تنبل بارگیری منابع را تا زمانی که در نمای پورت قابل مشاهده شوند به تاخیر می اندازد. تصاویر زیر تاشو یا پنهان در محتوای قابل پیمایش فورا دانلود نمی‌شوند و از مصرف منابع غیرضروری و تأخیر بارگذاری صفحه جلوگیری می‌کنند.

می‌توانید بدون استفاده از Intersection Observer بارگذاری را تنبل کنید، اما رویداد سنتی onScroll عنصر <img> کنترل دانه‌ای بر رفتار بارگذاری ارائه نمی‌کند. اما Intersection Observer به شما این امکان را می دهد که یک عنصر DOM را مشاهده کنید و اقدامات را بر اساس تقاطع آن با viewport فعال کنید.

مزایای بارگذاری تنبل با React Intersection Observer

بارگذاری سریعتر صفحه با به تعویق انداختن بارگذاری تصویر، زمان بارگذاری اولیه صفحه بهبود می یابد، که منجر به تعامل بهتر کاربر و کاهش زمان بارگذاری اولیه صفحه می شود.

حیاتی وب اصلی بهبود یافته است . معیارهایی مانند بزرگترین رنگ محتوا (LCP) از بارگذاری تنبل سود می برند و امتیازات SEO و Google Lighthouse برنامه شما را افزایش می دهند.

کاهش مصرف داده . کاربرانی که در اتصالات کندتر یا برنامه های داده محدود هستند، از کاهش مصرف داده بهره مند می شوند، زیرا تصاویر بر حسب تقاضا بارگیری می شوند.

پیمایش روان تر پیمایش واکنش‌پذیرتر است، زیرا تصاویر سنگین از قبل دانلود نمی‌شوند و از پرش‌های ناهنجار صفحه جلوگیری می‌کنند.

تجربه کاربری بهبود یافته کاربران محتوای مورد علاقه خود را سریعتر می بینند که منجر به تجربه کلی بهتری می شود.

نحوه اجرای بارگذاری تنبل با React Intersection Observer

برای شروع کدنویسی، ابتدا باید React Intersection Observer را در برنامه React خود راه اندازی کنیم. می توانید وابستگی را با استفاده از موارد زیر نصب کنید:

 npm install react-intersection-observer

قطعات و قلاب های لازم را وارد کنید:

 import React from "react" ; import { useInView } from "react-intersection-observer" ; const LazyImage = ( { src , alt , className } ) => { const [ ref , inView ] = useInView ( { triggerOnce : true , } ) ; return ( < img ref = { ref } src = { inView ? src : "" } alt = { alt } className = { ` lazy-image ${ className || "" } ` } /> ) ; } ; export default LazyImage ;

ادغام بارگذاری تنبل در اجزای خود

فرض کنید فهرستی از تصاویری دارید که می‌خواهید بارگذاری شوند. حالا بیایید از مؤلفه LazyImage در برنامه خود استفاده کنیم:

 import React from "react" ; import LazyImage from "./LazyImage" ; const ImageList = ( ) => { const images = [ { id : 1 , src : "image1.jpg" , alt : "Description 1" } , { id : 2 , src : "image2.jpg" , alt : "Description 2" } , { id : 3 , src : "image3.jpg" , alt : "Description 3" } , { id : 4 , src : "image4.png" , alt : "Description 4" } , { id : 5 , src : "image5.png" , alt : "Description 5" } , { id : 6 , src : "image6.png" , alt : "Description 6" } , { id : 7 , src : "image7.png" , alt : "Description 7" } , { id : 8 , src : "image8.png" , alt : "Description 8" } , { id : 9 , src : "image9.png" , alt : "Description 9" } , ] ; return ( < div >
      { images . map ( ( image ) => ( < LazyImage key = { image . id } src = { image . src } alt = { image . alt } className = " lazy-image " /> ) ) }
    </ div > ) ; } ; export default ImageList ;

مؤلفه LazyImage از قلاب useInView برای تعیین اینکه آیا یک عنصر در viewport است یا خیر، با استفاده از گزینه triggerOnce برای یک ماشه استفاده می کند. به صورت پویا ویژگی src تگ <img> را بر اساس قابلیت مشاهده عنصر تنظیم می کند. مؤلفه ImageList روی فهرستی از تصاویر نگاشت می شود و برای هر کدام یک LazyImage ارائه می دهد.

CodeSandbox با بارگذاری تنبل زیر حاوی کد کار کامل است.

اجرای بارگذاری تنبل برای کامپوننت ها با React Intersection Observer یک راه ساده برای افزایش عملکرد برنامه های React شما است. به تعویق انداختن بارگیری منابع تا زمان مورد نیاز، تجربه کاربری سریعتر و کارآمدتری را ارائه می دهد. اضافه کردن بارگذاری تنبل به پروژه های خود را در نظر بگیرید، به خصوص اگر شامل محتوای قابل توجهی باشد.

اسکرول بی نهایت تکنیکی است که با بارگذاری محتوای اضافی با رسیدن کاربر به انتهای صفحه، تجربه کاربر را افزایش می دهد.

به جای اینکه کاربران از طریق پیوندهای صفحه بندی سنتی حرکت کنند، پیمایش بی نهایت جریان یکپارچه و مداوم از محتوا را فراهم می کند.

با بارگذاری پویا محتوا با رسیدن کاربر به انتهای صفحه، وب سایت ها کاربران را درگیر خود نگه می دارند و از انتقال مخرب صفحه جلوگیری می کنند.

مزایای اسکرول بی نهایت با React Intersection Observer

بهبود تجربه کاربری کاربران می توانند بدون وقفه در محتوا حرکت کنند و تجربه جذاب تری را ارائه دهند.

استفاده کارآمد از منابع منابع فقط در صورت نیاز بارگذاری می شوند و از واکشی و رندر غیر ضروری داده ها می کاهد.

ناوبری ساده شده نیاز به پیوندهای صفحه بندی سنتی را از بین می برد و تجربه ناوبری را برای کاربران ساده می کند.

عملکرد بهبود یافته . مشاهده ریز دانه از محاسبات غیر ضروری و بارگذاری محتوا جلوگیری می کند.

افزایش دید . معیارهایی مانند Time to Interactive سود می‌برند، نمرات SEO و Google Lighthouse را افزایش می‌دهند.

نحوه پیاده سازی اسکرول بی نهایت با React Intersection Observer

طبق معمول، React Intersection Observer را به برنامه React خود اضافه کنید:

 npm install react-intersection-observer

قطعات و قلاب های لازم را وارد کنید:

 import React from "react" ; import { useInView } from "react-intersection-observer" ; const InfiniteScroll = ( { loadMore } ) => { const [ ref , inView ] = useInView ( { triggerOnce : true , } ) ; React . useEffect ( ( ) => { if ( inView ) { loadMore ( ) ; } } , [ inView , loadMore ] ) ; return < div ref = { ref } style = { { height : "10px" } } /> ; } ; export default InfiniteScroll ;

از مؤلفه InfiniteScroll برای پیاده سازی اسکرول بی نهایت استفاده کنید:

 import React , { useState } from "react" ; import InfiniteScroll from "./InfiniteScroll" ; const initialItems = [ { id : 1 , content : "Item 1" } , { id : 2 , content : "Item 2" } , { id : 3 , content : "Item 3" } , ] ; const fetchMoreData = ( page ) => { return Array . from ( { length : 5 } , ( _ , index ) => ( { id : initialItems . length + index + 1 , content : ` Item ${ initialItems . length + index + 1 } ` , } ) ) ; } ; const InfiniteScrollList = ( ) => { const [ items , setItems ] = useState ( initialItems ) ; const [ page , setPage ] = useState ( 1 ) ; const loadMore = ( ) => { const newData = fetchMoreData ( page + 1 ) ; setItems ( [ ... items , ... newData ] ) ; setPage ( page + 1 ) ; } ; return ( < div >
      { items . map ( ( item ) => ( < div key = { item . id } className = " list-item " >
          { }
          { item . content }
        </ div > ) ) }
      < InfiniteScroll loadMore = { loadMore } />
    </ div > ) ; } ; export default InfiniteScrollList ;

مؤلفه InfiniteScroll از قلاب useInView برای تشخیص نمایان بودن آن استفاده می‌کند و از تابع loadMore برای بارگیری محتوای اضافی استفاده می‌کند. سپس تابع loadMore داده های اضافی را واکشی می کند و آن را به فهرست موجود اضافه می کند. مؤلفه InfiniteScrollList یک تجربه پیمایش پیوسته را ارائه می‌کند و فهرستی از موارد را با بارگذاری پویا که توسط مؤلفه InfiniteScroll راه‌اندازی می‌شود، نمایش می‌دهد.

این Infinite Scroll CodeSandbox حاوی کد کار کامل است.

استفاده از قدرت Intersection Observer یک تجربه اسکرول بی نهایت کارآمد و جذاب را برای شما ایجاد می کند. این تکنیک عملکرد، رضایت کاربر و جذابیت کلی وب سایت شما را افزایش می دهد. به یاد داشته باشید، بهینه سازی سفر اسکرول به کاربران کمک می کند تا به برنامه شما متصل شوند.

از حالت 3: انیمیشن و ترانزیشن تریگرها با ناظر تقاطع استفاده کنید

انیمیشن ها و انتقال ها به یک صفحه وب زندگی می بخشند و آن را برای کاربران جذاب تر می کنند. با این حال، ایجاد این اثرات در لحظه مناسب می تواند چالش برانگیز باشد. Intersection Observer راه حلی را ارائه می دهد که به شما امکان می دهد تعیین کنید چه زمانی یک عنصر در معرض دید است و مکانیزمی عالی برای فعال کردن انیمیشن ها و انتقال ها ارائه می دهد.

زمان پخش انیمیشن ها در بارگذاری صفحه یا در موقعیت های اسکرول ثابت گذشته است. Intersection Observer سطح جدیدی از پویایی را باز می کند.

مزایای انیمیشن ها و انتقال ها با Intersection Observer

افزایش عملکرد . انیمیشن‌ها فقط در صورت نیاز یا زمانی فعال می‌شوند که باعث صرفه‌جویی در منابع و جلوگیری از محاسبات غیر ضروری می‌شود.

داستان سرایی پیشرفته محتوا زمانی زنده می شود که عناصر در لحظه حیاتی متحرک می شوند و توجه کاربر را به خود جلب می کنند و بر نکات کلیدی تأکید می کنند.

تعاملات پاسخگو انیمیشن های مختلف بر اساس عمق اسکرول امکان داستان گویی لایه ای و تجربیات شخصی را فراهم می کند.

پیمایش صاف . انتقال بین حالت ها به طور یکپارچه اتفاق می افتد، تعامل کاربر را افزایش می دهد و از وقفه های سخت جلوگیری می کند.

زمان بندی دقیق فعال‌های پویانمایی و انتقال بر اساس نمایان بودن عنصر هستند و زمان‌بندی دقیق و همگام‌سازی با تعاملات کاربر را تضمین می‌کنند.

تعامل کاربر افزایش یافته است . ایجاد اجزای بصری جذاب و تعاملی، تعامل کاربر را افزایش می دهد و تجربه کاربری پویاتری را ارائه می دهد.

نحوه پیاده سازی انیمیشن ها و انتقال ها با React Intersection Observer

مجدداً وابستگی React Intersection Observer را نصب کنید:

 npm install react-intersection-observer

مولفه قابل استفاده مجدد را برای مدیریت رویدادهای تقاطع ایجاد کنید:

 import React , { useEffect } from "react" ; const IntersectionAnimationTrigger = ( { children , onInView } ) => { const handleIntersection = ( entries , observer ) => { entries . forEach ( ( entry ) => { if ( entry . isIntersecting ) { onInView ( ) ; } } ) ; } ; useEffect ( ( ) => { const observer = new IntersectionObserver ( handleIntersection , { threshold : 0.5 , } ) ; observer . observe ( document . getElementById ( "animated-element" ) ) ; return ( ) => { observer . disconnect ( ) ; } ; } , [ onInView ] ) ; return < div id = " animated-element " > { children } </ div > ; } ; export default IntersectionAnimationTrigger ;

از مؤلفه IntersectionAnimationTrigger برای متحرک سازی هنگام مشاهده عنصر استفاده کنید:

 import React , { useState } from "react" ; import IntersectionAnimationTrigger from "./IntersectionAnimationTrigger" ; const AnimatedElement = ( ) => { const [ animated , setAnimated ] = useState ( false ) ; const handleInView = ( ) => { setAnimated ( true ) ; } ; return ( < IntersectionAnimationTrigger onInView = { handleInView } >
      < div className = { ` animated-element ${ animated ? "animate" : "" } ` } >
        { } This element will animate as it comes into view. </ div >
    </ IntersectionAnimationTrigger > ) ; } ; export default AnimatedElement ;

مقداری CSS اضافه کنید تا انیمیشن از نظر بصری جذاب شود:

 .animated-element { opacity : 0 ; transform : translateY ( 20 px ) ; transition : opacity 0.5 s ease-in-out , transform 0.5 s ease-in-out ; } .animated-element .animate { opacity : 1 ; transform : translateY ( 0 ) ; width : 15 rem ; height : 5 rem ; margin : 0 auto ; color : blue ; }

مؤلفه IntersectionAnimationTrigger از قلاب useInView برای ردیابی نمایان شدن عنصر استفاده می‌کند، و هنگام ورود به نمای، پاسخ تماس onInView را اجرا می‌کند. در مولفه AnimatedElement ، حالت animated تغییر می کند تا زمانی که عنصر قابل مشاهده می شود، انیمیشن شروع شود.

این جعبه انیمیشن و انتقال کدها حاوی کد کار کامل است.

برای هر هدف کاربردی، استفاده از رویدادهای تقاطع جذابیت بصری پروژه شما را افزایش می دهد. برای یافتن تعادل مناسب برای مورد استفاده شخصی خود، انیمیشن ها و انتقال های مختلف را آزمایش کنید.

خلاصه

React Intersection Observer با ارائه قلاب‌ها و کامپوننت‌های مخصوص React، فرآیند بارگذاری تنبل، پیمایش بی‌نهایت و فعال‌سازی انیمیشن را ساده می‌کند و به شما کمک می‌کند تا عملکردهای مربوط به تقاطع را در برنامه‌های React خود بگنجانید. برخی از پیچیدگی‌ها را انتزاعی می‌کند، و یک نحو اعلانی‌تر ارائه می‌دهد که با ماهیت مبتنی بر مؤلفه React همسو می‌شود.

اگر از این مقاله React لذت بردید، این منابع عالی دیگر از SitePoint را تحلیل کنید:

ارجاعات بیشتر

خبرکاو