Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Você já se deparou com um site ou aplicativo que carrega e exibe mais conteúdo enquanto 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, especialmente em dispositivos móveis.

Existem algumas maneiras diferentes de implementar a rolagem infinita no React.js. Uma maneira é usar uma biblioteca como react-infinite-scroll-component. Essa biblioteca fornece um componente que acionará um evento quando o usuário rolar para a parte inferior da página. Você pode usar esse evento para carregar mais conteúdo.

Outra maneira de implementar a rolagem infinita é usar as funções integradas fornecidas pelo React. Uma dessas funções é “componentDidMount” que o React chama quando um componente é montado pela primeira vez.

Você pode usar esta 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 baixo. Você também pode use ganchos de reação para adicionar um recurso de rolagem infinita.

Para usar react-infinite-scroll-component, você precisa instalá-lo primeiro usando npm:

npm instalar reagir-infinito-rolagem-componente --salvar

Então, você pode importá-lo para o seu componente React.

importar Reagir de 'reagir'
importar Rolagem infinita de 'componente de rolagem infinita de reação'
aulaAplicativoestendeReagir.Componente{
construtor() {
super()
esse.estado = {
Unid: [],
 tem mais: verdadeiro
 }
 }


componenteDidMount() {
esse.fetchData(1)
 }


buscarData = (página) => {
const novosItens = []


para (deixar eu = 0; eu < 100; i++) {
Novos itens.empurrar(eu )
 }


se (página 100) {
esse.setState({ tem mais: falso })
 }


esse.setState({ Unid: [...this.state.items, ...newItems] })
 }


render() {
retornar (
<div>
<h1>Rolagem infinita</h1>
<Rolagem infinita
 dataLength={esse.estado.itens.comprimento}
 próximo={esse.fetchData}
 temMais={esse.state.hasMais}
 carregador={<h4>Carregando...</h4>}
 endMessage={
<p estilo={{ textAlign: 'Centro' }}>
<b>Yay! você já viu tudo</b>
</p>
 }
>
 {esse.state.items.map((item, índice) => (
<chave div={índice}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exportarpadrão Aplicativo

Este código começa importando React e o componente InfiniteScroll da biblioteca react-infinite-scroll-component. Em seguida, ele cria um componente com estado e inicializa o estado com um vazio Unid matriz e um tem mais sinalizador definido como verdadeiro.

No método de ciclo de vida componentDidMount, você chama o buscar dados método com um página parâmetro de 1. O método fetchData faz uma chamada de API para obter alguns dados. Este exemplo apenas gera alguns dados fictícios. Em seguida, ele cria uma matriz de 100 itens.

Se o parâmetro da página for 100, não há mais itens; portanto, defina o sinalizador hasMore como falso. Isso impedirá que o componente InfiniteScroll faça outras chamadas de API. Por fim, defina o estado usando os novos dados.

O método render usa o componente InfiniteScroll e passa algumas props. A propriedade dataLength é definida como o comprimento da matriz de itens. A próxima prop é configurada para o método fetchData. O prop hasMore é definido como o sinalizador hasMore. A propriedade loader faz com que o componente renderize seu conteúdo como um indicador de carregamento. Da mesma forma, ele renderizará a propriedade endMessage como uma mensagem quando todos os dados terminarem de ser carregados.

Existem também outras props que você pode passar para o componente InfiniteScroll, mas essas são as que você usará com mais frequência.

Usando Funções Integradas

O React também possui alguns métodos integrados que você pode usar para implementar a rolagem infinita.

O primeiro método é componenteDidUpdate. O React chama esse método após atualizar um componente. Você pode usar esse método para verificar se o usuário rolou para o final da página e, em caso afirmativo, carregar mais dados.

O segundo método é rolagem, que o React chama quando o usuário rola. Você pode usar esse método para controlar a posição de rolagem. Se o usuário rolou até a parte inferior da página, você pode carregar mais dados.

Aqui está um exemplo de como você pode usar esses métodos para implementar a rolagem infinita:

importar Reagir, {useState, useEffect} de 'reagir'
funçãoAplicativo() {
const [itens, setItems] = useState([])
const [temMais, setHasMais] = useState(verdadeiro)
const [página, setPage] = useState(1)


useEffect(() => {
 buscarData (página)
 }, [página])


const buscarData = (página) => {
const novosItens = []


para (deixar eu = 0; eu < 100; i++) {
Novos itens.empurrar(eu)
 }


se (página 100) {
 setHasMais(falso)
 }


setItems([...itens, ...novosItens])
 }


const onScroll = () => {
const scrollTop = documento.documentElement.scrollTop
const scrollHeight = documento.documentElement.scrollHeight
const clienteAltura = documento.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (página + 1)
 }
 }


useEffect(() => {
 window.addEventListener('rolagem', no Scroll)
 retornar () => window.removeEventListener('rolagem', no Scroll)
 }, [Unid])


retornar (
<div>
 {items.map((item, índice) => (
<chave div={índice}>
 {item}
</div>
 ))}
</div>
 )
}
exportarpadrão Aplicativo

Esse código usa os ganchos useState e useEffect para gerenciar o estado e os efeitos colaterais.

No gancho useEffect, ele chama 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á apenas gerando alguns dados fictícios para demonstrar a técnica.

O loop for preenche o array newItems com 100 inteiros. Se o parâmetro da página for 100, defina o sinalizador hasMore como falso. Isso impedirá que o componente InfiniteScroll faça outras chamadas de API. Por fim, defina o estado com os novos dados.

O método onScroll controla a posição de rolagem. Se o usuário rolou até o final da página, você pode carregar mais dados.

O gancho useEffect adiciona um ouvinte de evento para o evento scroll. Quando o evento scroll é acionado, ele chama o método onScroll.

Existem prós e contras em usar a rolagem infinita. Pode ajudar a melhorar a interface do usuário, tornando a experiência mais suave, especialmente em dispositivos móveis. No entanto, isso também pode fazer com que os usuários percam o conteúdo, pois eles podem não rolar para baixo o suficiente para vê-lo.

É importante pesar os prós e os contras da técnica de rolagem infinita antes de implementá-lo em seu site ou aplicativo.

Adicionar 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 conteúdo. 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.