Você já encontrou um site ou aplicativo que carrega e exibe mais conteúdo conforme você rola? Isso é o que chamamos de rolagem infinita.
A rolagem infinita é uma técnica popular que pode facilitar a navegação em grandes quantidades de conteúdo. Também pode proporcionar uma experiência de usuário mais tranquila, especialmente em dispositivos móveis.
Você pode implementar a rolagem infinita no React de algumas maneiras diferentes. A primeira é usar uma biblioteca como react-infinite-scroll-component. O componente desta biblioteca aciona um evento sempre que o usuário rola até o final da página. Você pode então usar esse evento como uma dica para carregar mais conteúdo.
Outra maneira de implementar a rolagem infinita no React é por meio de suas funções integradas. Uma dessas funções é “componentDidMount”, que o React chama quando monta um componente pela primeira vez.
Você pode usar esta função para carregar o primeiro lote de dados, seguida pela função “componentDidUpdate” para carregar os dados subsequentes conforme o usuário rola para baixo.
Você também pode usar ganchos React para adicionar um recurso de rolagem infinita.
Existem algumas maneiras de usar o componente react-infinite-scroll.
últimas postagens
Instale o componente react-infinite-scroll
Para iniciar o uso, primeiro você precisa instalá-lo via npm:
npm install react-infinite-scroll-component --save
Importe o componente react-infinite-scroll para o React
Após a instalação, você precisa importar a biblioteca de rolagem infinita 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, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
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 o inicializa com uma matriz de itens vazia e um sinalizador hasMore definido como True.
Definir parâmetros
No método de ciclo de vida componentDidMount, você deve chamar o método fetchData com um parâmetro de página definido como 1. O método fetchData faz uma chamada de API para buscar dados. Este exemplo de react-infinite-scroller gera alguns dados fictícios e cria uma matriz de 100 itens.
Quando o parâmetro page atingir 100, como não existem mais itens, você poderá definir o sinalizador hasMore como False. Isso impede que o componente InfiniteScroll faça outras chamadas de API. Finalmente, defina o estado usando os novos dados.
O método render usa o componente InfiniteScroll e passa alguns adereços. A propriedade dataLength é definida como o comprimento da matriz de itens. A propriedade a seguir é definida como o método fetchData. A propriedade hasMore é definida como igual ao 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 carregar.
Você pode passar outros adereços para o componente InfiniteScroll, mas estes são os 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 o InfiniteScroll.
O primeiro método é componentDidUpdate. O React chama esse método depois de atualizar um componente. Você pode usar este método para verificar se o usuário rolou até o final da página. Se sim, ele carrega mais dados.
O segundo método é scroll, que o React chama quando o usuário rola. Você pode usar este método para controlar a posição de rolagem. Você pode carregar mais dados se o usuário rolar até o final da página.
Aqui está um exemplo de rolagem infinita do React que mostra como usar estes métodos:
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, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
Este código usa os ganchos useState e useEffect para gerenciar o estado e os efeitos colaterais.
Dentro do gancho useEffect, ele chama o método fetchData com a página atual. O método fetchData faz uma chamada de API para buscar 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 page for 100, ele define o sinalizador hasMore como False. Isso impede que o componente de rolagem infinita faça outras chamadas de API.
Finalmente, defina o estado com os novos dados.
O método onScroll monitora a posição de rolagem. Você pode carregar mais dados se o usuário rolar até o final da página.
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 do React. Ele melhora a interface do usuário, proporcionando uma experiência mais tranquila, especialmente em dispositivos móveis. No entanto, também pode fazer com que os usuários percam conteúdo, pois eles podem não rolar para baixo o suficiente para vê-lo.
É essencial pesar os prós e os contras da técnica de rolagem infinita antes de implementá-la em seu site ou aplicativo.
Adicionar rolagem infinita ao seu site ou aplicativo React.js pode melhorar a experiência do usuário. Com a rolagem infinita, os usuários não precisam clicar para ver mais conteúdo. Usar a rolagem infinita em seu aplicativo React.js pode reduzir o número de carregamentos de página, o que melhora ainda mais o desempenho.
Você também pode implantar facilmente seu aplicativo React nas páginas do Github gratuitamente.