Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.

¿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 un pergamino infinito.

El desplazamiento infinito es una técnica popular que reduce el número de cargas de página. También puede hacer que la experiencia del usuario sea más fluida, especialmente en dispositivos móviles.

Hay algunas formas diferentes de implementar el desplazamiento infinito en React.js. Una forma es usar una biblioteca como react-infinite-scroll-component. Esta biblioteca proporciona un componente que activará un evento cuando el usuario se desplace hasta la parte inferior de la página. Luego puede usar este evento para cargar más contenido.

Otra forma de implementar el desplazamiento infinito es usar las funciones integradas que proporciona React. Una de esas funciones es "componentDidMount", a la que React llama cuando se monta un componente por primera vez.

instagram viewer

Puede usar esta función para cargar el primer lote de datos y luego usar la función "componentDidUpdate" para cargar más datos cuando el usuario se desplaza hacia abajo. Tú también puedes usar ganchos de reacción para agregar una función de desplazamiento infinito.

Para usar react-infinite-scroll-component, primero debe instalarlo usando npm:

npm instalar reaccionar-infinito-Desplazarse-componente --ahorrar

Luego, puede importarlo a su componente React.

importar Reaccionar de 'reaccionar'
importar Scroll infinito de 'reaccionar-infinito-scroll-componente'
claseaplicaciónextiendeReaccionar.Componente{
constructor() {
súper()
este.estado = {
elementos: [],
 tiene mas: verdadero
 }
 }


componenteHizoMontar() {
este.obtener datos(1)
 }


fetchData = (página) => {
constante nuevos elementos = []


para (dejar yo = 0; yo < 100; i++) {
Nuevos objetos.empujar(i )
 }


si (página 100) {
este.setState({ tiene mas: FALSO })
 }


este.setState({ elementos: [...this.state.items, ...newItems] })
 }


prestar() {
devolver (
<división>
<h1>Scroll infinito</h1>
<Scroll infinito
 longitud de datos = {este.estado.elementos.longitud}
 siguiente={este.obtener datos}
 tieneMás={este.state.hasMore}
 cargador={<h4>Cargando...</h4>}
 mensaje final={
<p estilo={{ textAlign: 'centro' }}>
<b>¡Hurra! lo has visto todo</b>
</pag>
 }
>
 {este.state.items.map((elemento, índice) => (
<clave div={índice}>
 {artículo}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
exportarpor defecto aplicación

Este código comienza importando React y el componente InfiniteScroll de la biblioteca react-infinite-scroll-component. A continuación, crea un componente con estado e inicializa el estado con un vacío elementos matriz y un tiene mas indicador establecido en verdadero.

En el método del ciclo de vida del componenteDidMount, usted llama al obtener datos método con un página parámetro de 1. El método fetchData hace una llamada a la API para obtener algunos datos. Este ejemplo solo genera algunos datos ficticios. Luego crea una matriz de 100 elementos.

Si el parámetro de la página es 100, no hay más elementos, así que establezca el indicador hasMore en falso. Esto evitará que el componente InfiniteScroll realice más llamadas a la API. Finalmente, establezca el estado usando los nuevos datos.

El método de representación utiliza el componente InfiniteScroll y pasa algunos accesorios. La propiedad dataLength se establece en la longitud de la matriz de elementos. El siguiente accesorio se establece en el método fetchData. El accesorio hasMore se establece en el indicador hasMore. El apoyo del cargador hace que el componente represente su contenido como un indicador de carga. Del mismo modo, mostrará la propiedad endMessage como un mensaje cuando todos los datos hayan terminado de cargarse.

También hay otras propiedades que puede pasar al componente InfiniteScroll, pero estas son las que usará con más frecuencia.

Uso de funciones integradas

React también tiene algunos métodos integrados que puede usar para implementar el desplazamiento infinito.

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 la parte inferior de la página y, en caso afirmativo, cargar más datos.

El segundo método es Desplazarse, que React llama cuando el usuario se desplaza. Puede utilizar este método para realizar un seguimiento de la posición de desplazamiento. Si el usuario se ha desplazado hasta la parte inferior de la página, puede cargar más datos.

Aquí hay un ejemplo de cómo podría usar estos métodos para implementar el desplazamiento infinito:

importar reaccionar, {usar estado, usar efecto} de 'reaccionar'
funciónaplicación() {
constante [artículos, setItems] = useState([])
constante [tieneMás, estableceTieneMás] = useState(verdadero)
constante [página, establecerPágina] = usarEstado(1)


usarEfecto(() => {
 fetchData (página)
 }, [página])


constante fetchData = (página) => {
constante nuevos elementos = []


para (dejar yo = 0; yo < 100; i++) {
Nuevos objetos.empujar(i)
 }


si (página 100) {
 establecerTieneMás(FALSO)
 }


setItems([... artículos,... artículos nuevos])
 }


constante onScroll = () => {
constante scrollTop = documento.documentElement.scrollTop
constante altura de desplazamiento = documento.documentElement.scrollHeight
constante altura del cliente = documento.documentElement.clientHeight


if (scrollTop + clientHeight >= altura de desplazamiento) {
 setPage (página + 1)
 }
 }


usarEfecto(() => {
 ventana.addEventListener('Desplazarse', en desplazamiento)
 retorno () => ventana.removeEventListener('Desplazarse', en desplazamiento)
 }, [elementos])


devolver (
<división>
 {elementos.mapa((elemento, índice) => (
<clave div={índice}>
 {artículo}
</div>
 ))}
</div>
 )
}
exportarpor defecto aplicación

Este código usa los ganchos useState y useEffect para administrar el estado y los efectos secundarios.

En el enlace useEffect, llama al método fetchData con la página actual. El método fetchData hace una llamada a la API para obtener algunos datos. En este ejemplo, solo está generando algunos datos ficticios para demostrar la técnica.

El bucle for llena la matriz newItems con 100 enteros. Si el parámetro de la página es 100, establezca el indicador hasMore en falso. Esto evitará que el componente InfiniteScroll 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. Si el usuario se ha desplazado hasta la parte inferior de la página, puede cargar más datos.

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.

Hay pros y contras de usar el desplazamiento infinito. Puede ayudar a mejorar 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 pierdan contenido, ya que es posible que no se desplacen hacia abajo lo suficiente para verlo.

Es importante sopesar los pros y los contras. de la técnica del pergamino infinito antes de implementarlo en su sitio web o aplicación.

Agregar desplazamiento infinito a su sitio web o aplicación React.js puede ayudar a mejorar la experiencia del usuario. Con 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 también puede ayudar a reducir la cantidad de cargas de página, lo que puede mejorar el rendimiento.

También puede implementar fácilmente su aplicación React en las páginas de Github de forma gratuita.