Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.

Попадали ли сте някога на уебсайт или приложение, което зарежда и показва повече съдържание, докато превъртате? Това е, което наричаме безкраен свитък.

Безкрайното превъртане е популярна техника, която намалява броя на зарежданията на страниците. Освен това може да осигури по-плавно потребителско изживяване, особено на мобилни устройства.

Има няколко различни начина, по които можете да приложите безкрайно превъртане в React.js. Един от начините е да използвате библиотека като react-infinite-scroll-component. Тази библиотека предоставя компонент, който ще задейства събитие, когато потребителят превърти до края на страницата. След това можете да използвате това събитие, за да заредите повече съдържание.

Друг начин за прилагане на безкрайно превъртане е да използвате вградените функции, които React предоставя. Една такава функция е „componentDidMount“, която React извиква, когато даден компонент е монтиран за първи път.

instagram viewer

Можете да използвате тази функция, за да заредите първата партида от данни и след това да използвате функцията „componentDidUpdate“, за да заредите повече данни, когато потребителят превърти надолу. Можете също използвайте куки React за да добавите функция за безкрайно превъртане.

За да използвате react-infinite-scroll-component, първо трябва да го инсталирате с помощта на npm:

npm Инсталирай реагира-безкрайно-превъртане-компонент --спести

След това можете да го импортирате във вашия React компонент.

импортиране Реагирайте от "реагира"
импортиране InfiniteScroll от 'react-infinite-scroll-component'
класПриложениесе простираРеагирайте.Компонент{
конструктор() {
супер()
това.state = {
елементи: [],
 има повече: вярно
 }
 }


componentDidMount() {
това.fetchData(1)
 }


fetchData = (страница) => {
конст нови елементи = []


за (позволявам аз = 0; аз < 100; i++) {
нови предмети.натискане(аз )
 }


if (страница 100) {
това.setState({ има повече: невярно })
 }


това.setState({ елементи: [...this.state.items, ...newItems] })
 }


рендер() {
връщане (
<див>
<h1>Безкрайно превъртане</h1>
<InfiniteScroll
 dataLength={това.state.items.length}
 следващ={това.fetchData}
 hasMore={това.state.hasMore}
 loader={<h4>Зареждане...</h4>}
 endMessage={
<p style={{ textAlign: 'център' }}>
<b>Ура! Виждали сте всичко</б>
</стр>
 }
>
 {това.state.items.map((елемент, индекс) => (
<div ключ={индекс}>
 {вещ}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
износпо подразбиране Приложение

Този код започва с импортиране на React и компонента InfiniteScroll от библиотеката react-infinite-scroll-component. След това създава компонент със състояние и инициализира състоянието с празно елементи масив и a има повече флагът е зададен на true.

В метода на жизнения цикъл на componentDidMount вие извиквате fetchData метод с a страница параметър на 1. Методът fetchData прави извикване на API, за да получи някои данни. Този пример просто генерира някои фиктивни данни. След това създава масив от 100 елемента.

Ако параметърът на страницата е 100, няма повече елементи, така че задайте флага hasMore на false. Това ще спре компонента InfiniteScroll да прави по-нататъшни извиквания на API. Накрая задайте състоянието, като използвате новите данни.

Методът за изобразяване използва компонента InfiniteScroll и предава някои подпори. Пропът dataLength е зададен на дължината на масива от елементи. Следващият проп е зададен на метода fetchData. Пропът hasMore е настроен на флага hasMore. Пропът на зареждащия кара компонента да рендира съдържанието си като индикатор за зареждане. По същия начин, той ще рендира endMessage prop като съобщение, когато всички данни приключат със зареждането.

Има и други подпори, които можете да предадете на компонента InfiniteScroll, но това са тези, които ще използвате най-често.

Използване на вградени функции

React също има някои вградени методи, които можете да използвате за прилагане на безкрайно превъртане.

Първият метод е componentDidUpdate. React извиква този метод, след като актуализира компонент. Можете да използвате този метод, за да проверите дали потребителят е превъртял до дъното на страницата и ако е така, заредете още данни.

Вторият метод е превъртане, който React извиква, когато потребителят превърта. Можете да използвате този метод, за да следите позицията на превъртане. Ако потребителят е превъртял до дъното на страницата, тогава можете да заредите още данни.

Ето пример за това как бихте могли да използвате тези методи за внедряване на безкрайно превъртане:

импортиране Реагирайте, {useState, useEffect} от "реагира"
функцияПриложение() {
конст [items, setItems] = useState([])
конст [hasMore, setHasMore] = useState(вярно)
конст [страница, setPage] = useState(1)


useEffect(() => {
 fetchData (страница)
 }, [страница])


конст fetchData = (страница) => {
конст нови елементи = []


за (позволявам аз = 0; аз < 100; i++) {
нови предмети.натискане(аз)
 }


if (страница 100) {
 setHasMore(невярно)
 }


setItems([...артикули, ...нови артикули])
 }


конст onScroll = () => {
конст scrollTop = документ.documentElement.scrollTop
конст scrollHeight = документ.documentElement.scrollHeight
конст clientHeight = документ.documentElement.clientHeight


ако (scrollTop + clientHeight >= scrollHeight) {
 setPage (страница + 1)
 }
 }


useEffect(() => {
 window.addEventListener('превъртане', при превъртане)
 връщане () => window.removeEventListener('превъртане', при превъртане)
 }, [артикули])


връщане (
<див>
 {items.map((елемент, индекс) => (
<div ключ={индекс}>
 {вещ}
</div>
 ))}
</div>
 )
}
износпо подразбиране Приложение

Този код използва куките useState и useEffect за управление на състояние и странични ефекти.

В куката useEffect тя извиква метода fetchData с текущата страница. Методът fetchData прави извикване на API, за да получи някои данни. В този пример вие просто генерирате някои фиктивни данни, за да демонстрирате техниката.

Цикълът for попълва масива newItems със 100 цели числа. Ако параметърът на страницата е 100, задайте флага hasMore на false. Това ще спре компонента InfiniteScroll да прави по-нататъшни извиквания на API. Накрая задайте състоянието с новите данни.

Методът onScroll следи позицията на превъртане. Ако потребителят е превъртял до дъното на страницата, можете да заредите още данни.

Куката useEffect добавя слушател на събития за събитието за превъртане. Когато събитието за превъртане се задейства, то извиква метода onScroll.

Използването на безкрайно превъртане има плюсове и минуси. Може да помогне за подобряване на потребителския интерфейс, което прави изживяването по-плавно, особено на мобилни устройства. Това обаче може също така да доведе до пропускане на съдържание на потребителите, тъй като може да не превъртят надолу достатъчно, за да го видят.

Важно е да се претеглят плюсовете и минусите на техниката на безкрайно превъртане преди да го внедрите на вашия уебсайт или приложение.

Добавянето на безкрайно превъртане към вашия уебсайт или приложение React.js може да помогне за подобряване на потребителското изживяване. С безкрайното превъртане потребителите не трябва да кликват, за да видят повече съдържание. Използването на Infinite Scroll във вашето приложение React.js също може да помогне за намаляване на броя на зарежданията на страници, което може да подобри производителността.

Можете също така лесно да внедрите приложението си React в страниците на Github безплатно.