Você já se deparou com um site ou aplicativo que carrega e exibe mais teor à medida que você rola? Isso é o que chamamos de pergaminho infinito.
A rolagem infinita é uma técnica popular que reduz o número de carregamentos de página. Também pode proporcionar uma experiência de usuário mais suave, mormente em dispositivos móveis.
Existem algumas maneiras diferentes de implementar a rolagem infinita no React.js. Uma maneira é usar uma livraria uma vez que react-infinite-scroll-component. Essa livraria fornece um componente que acionará um evento quando o usuário rolar até o final da página. Você pode usar esse evento para carregar mais teor.
Outra maneira de implementar a rolagem infinita é usar as funções internas que o React fornece. Uma dessas funções é “componentDidMount” que o React labareda quando um componente é montado pela primeira vez.
Você pode usar essa função para carregar o primeiro lote de dados e, em seguida, usar a função “componentDidUpdate” para carregar mais dados quando o usuário rolar para reles. Você também pode usar ganchos React para juntar um recurso de rolagem infinita.
Para usar react-infinite-scroll-component, você precisa instalá-lo primeiro usando npm:
npm install react-infinite-scroll-component Em seguida, você pode importá-lo para o seu componente React.
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}
componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, índice) => (
<div key={índice}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Nascente código começa importando o React e o componente InfiniteScroll da livraria react-infinite-scroll-component. Em seguida, ele cria um componente com estado e inicializa o estado com um vazio Itens matriz e um tem mais sinalizador definido uma vez que verdadeiro.
No método de ciclo de vida componentDidMount, você labareda o método buscarDados método com um página parâmetro de 1. O método fetchData faz uma chamada de API para obter alguns dados. Nascente exemplo exclusivamente gera alguns dados fictícios. Em seguida, ele cria uma matriz de 100 itens.
Se o parâmetro page for 100, não há mais itens, portanto, defina o sinalizador hasMore uma vez que false. Isso impedirá que o componente InfiniteScroll faça mais chamadas de API. Por termo, defina o estado usando os novos dados.
O método render usa o componente InfiniteScroll e passa alguns adereços. A prop dataLength é definida para o comprimento da matriz de itens. A próxima prop é definida para o método fetchData. O prop hasMore é definido para o sinalizador hasMore. O suporte do carregador faz com que o componente renderize seu teor uma vez que um indicador de carregamento. Da mesma forma, ele renderizará a propriedade endMessage uma vez que uma mensagem quando todos os dados terminarem de carregar.
Há também outros adereços que você pode passar para o componente InfiniteScroll, mas esses são os que você usará com mais frequência.
Usando funções integradas
O React também possui alguns métodos internos que você pode usar para implementar a rolagem infinita.
O primeiro método é componentDidUpdate. O React labareda esse método depois atualizar um componente. Você pode usar esse método para verificar se o usuário rolou até o final da página e, em caso positivo, carregar mais dados.
O segundo método é rolagem, que o React labareda quando o usuário rola. Você pode usar esse método para escoltar a posição de rolagem. Se o usuário rolar até o final da página, você poderá carregar mais dados.
Cá está um exemplo de uma vez que você pode usar esses métodos para implementar a rolagem infinita:
import React, {useState, useEffect} from 'react'function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, índice) => (
<div key={índice}>
{item}
</div>
))}
</div>
)
}
export default App
Esse código usa os ganchos useState e useEffect para gerenciar o estado e os efeitos colaterais.
No gancho useEffect, ele labareda o método fetchData com a página atual. O método fetchData faz uma chamada de API para obter alguns dados. Neste exemplo, você está exclusivamente gerando alguns dados fictícios para provar a técnica.
O loop for preenche o array newItems com 100 inteiros. Se o parâmetro page for 100, defina o sinalizador hasMore uma vez que false. Isso impedirá que o componente InfiniteScroll faça mais chamadas de API. Por termo, defina o estado com os novos dados.
O método onScroll mantém o controle da posição de rolagem. Se o usuário rolar até o final da página, você poderá carregar mais dados.
O gancho useEffect adiciona um ouvinte de eventos para o evento de rolagem. Quando o evento de rolagem é acionado, ele labareda o método onScroll.
Existem prós e contras em usar a rolagem infinita. Pode ajudar a melhorar a interface do usuário, proporcionando uma experiência mais suave, mormente em dispositivos móveis. No entanto, também pode levar os usuários a perder teor, pois eles podem não rolar para reles o suficiente para vê-lo.
É importante tarar os prós e os contras da técnica de rolagem infinita antes de implementá-la em seu site ou aplicativo.
Aditar rolagem infinita ao seu site ou aplicativo React.js pode ajudar a melhorar a experiência do usuário. Com rolagem infinita, os usuários não precisam clicar para ver mais teor. Usar a rolagem infinita em seu aplicativo React.js também pode ajudar a reduzir o número de carregamentos de página, o que pode melhorar o desempenho.
Você também pode implantar facilmente seu aplicativo React nas páginas do Github gratuitamente.
Barnabé Ferreira