¿Alguna vez te has encontrado con un sitio web o una aplicación que carga y muestra más contenido a medida que te desplazas? Esto es lo que llamamos desplazamiento infinito.
El desplazamiento infinito es una técnica popular que puede facilitar la navegación por grandes cantidades de contenido. También puede ofrecer una experiencia de usuario más fluida, especialmente en dispositivos móviles.
Puedes implementar el desplazamiento infinito en React de diferentes maneras. La primera es utilizar una biblioteca como reaccionar-infinite-scroll-component. El componente de esta biblioteca desencadena un evento cada vez que el usuario se desplaza hasta el final de la página. Luego puedes usar este evento como señal para cargar más contenido.
Otra forma de implementar el desplazamiento infinito en React es a través de sus funciones integradas. Una de esas funciones es «componentDidMount», a la que React llama cuando monta un componente por primera vez.
Puede utilizar esta función para cargar el primer lote de datos, seguida de la función «componentDidUpdate» para cargar datos posteriores a medida que el usuario se desplaza hacia abajo.
También puedes usar ganchos de React para agregar una función de desplazamiento infinito.
Hay algunas formas de utilizar el componente de desplazamiento infinito de reacción.
Tabla de contenido
Instalar el componente de desplazamiento infinito de reacción
Para iniciar el uso, primero debe instalarlo a través de npm:
npm install react-infinite-scroll-component --save
Importar componente de desplazamiento infinito a React
Después de la instalación, debe importar la biblioteca de desplazamiento infinito a su 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 comienza importando React y el componente InfiniteScroll de la biblioteca react-infinite-scroll-component. Luego crea un componente con estado y lo inicializa con una matriz de elementos vacía y un indicador hasMore establecido en Verdadero.
Establecer parámetros
En el método del ciclo de vida de componenteDidMount, debe llamar al método fetchData con un parámetro de página establecido en 1. El método fetchData realiza una llamada API para recuperar datos. Este ejemplo de desplazamiento infinito de reacción genera algunos datos ficticios y crea una matriz de 100 elementos.
Una vez que el parámetro de la página llega a 100, dado que no existen más elementos, puede establecer el indicador hasMore en Falso. Esto evita que el componente InfiniteScroll realice más llamadas a la API. Finalmente, establezca el estado utilizando los nuevos datos.
El método de renderizado utiliza el componente InfiniteScroll y pasa algunos accesorios. La propiedad dataLength se establece en la longitud de la matriz de elementos. El siguiente accesorio está configurado para el método fetchData. El accesorio hasMore se establece igual al indicador hasMore.
La propiedad del cargador hace que el componente muestre su contenido como un indicador de carga. Del mismo modo, representará la propiedad endMessage como un mensaje cuando todos los datos hayan terminado de cargarse.
Puedes pasar otros accesorios al componente InfiniteScroll, pero estos son los que usarás con más frecuencia.
Uso de funciones integradas
React también tiene algunos métodos integrados que puedes usar para implementar InfiniteScroll.
El primer método es componenteDidUpdate. React llama a este método después de actualizar un componente. Puede utilizar este método para comprobar si el usuario se ha desplazado hasta el final de la página. En caso afirmativo, carga más datos.
El segundo método es el desplazamiento, al que React llama cuando el usuario se desplaza. Puede utilizar este método para realizar un seguimiento de la posición de desplazamiento. Puede cargar más datos si el usuario se ha desplazado hasta el final de la página.
Aquí hay un ejemplo de desplazamiento infinito de React que le muestra cómo usar estos 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 utiliza los ganchos useState y useEffect para administrar el estado y los efectos secundarios.
Dentro del gancho useEffect, llama al método fetchData con la página actual. El método fetchData realiza una llamada API para recuperar datos. En este ejemplo, simplemente estás generando algunos datos ficticios para demostrar la técnica.
El bucle for llena la matriz newItems con 100 números enteros. Si el parámetro de la página es 100, establece el indicador hasMore en False. Esto evita que el componente de desplazamiento infinito realice más llamadas a la API.
Finalmente, establezca el estado con los nuevos datos.
El método onScroll realiza un seguimiento de la posición de desplazamiento. Puede cargar más datos si el usuario se desplaza hasta la parte inferior de la página.
El gancho useEffect agrega un detector de eventos para el evento de desplazamiento. Cuando se activa el evento de desplazamiento, llama al método onScroll.
Existen ventajas y desventajas al usar el desplazamiento infinito de React. Mejora la interfaz de usuario, lo que hace que la experiencia sea más fluida, especialmente en dispositivos móviles. Sin embargo, también puede hacer que los usuarios se pierdan contenido, ya que es posible que no se desplacen hacia abajo lo suficiente para verlo.
Es fundamental sopesar los pros y los contras de la técnica del desplazamiento infinito antes de implementarla en su sitio web o aplicación.
Agregar desplazamiento infinito a su sitio web o aplicación React.js puede mejorar la experiencia del usuario. Con el desplazamiento infinito, los usuarios no tienen que hacer clic para ver más contenido. El uso de Infinite Scroll en su aplicación React.js puede reducir la cantidad de cargas de página, lo que mejora aún más el rendimiento.
También puedes implementar fácilmente tu aplicación React en páginas de Github de forma gratuita.
