He creado un componente en React que se supone que actualiza su propio estilo en el desplazamiento de la ventana para crear un efecto de paralaje.
El método de render de componentes se ve así:
function() { let style = { transform: 'translateY(0px)' }; window.addEventListener('scroll', (event) => { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); style.transform = 'translateY(' + itemTranslate + 'px)'); }); return ( <div style={style}></div> ); }Esto no funciona porque React no sabe que el componente ha cambiado y, por lo tanto, el componente no se vuelve a renderizar.
Intenté almacenar el valor de itemTranslate en el estado del componente y llamar a setState en la devolución de llamada de desplazamiento. Sin embargo, esto hace que el desplazamiento sea inutilizable ya que es terriblemente lento.
¿Alguna sugerencia sobre cómo hacer esto?
Debe vincular el oyente en componentDidMount , de esa manera solo se crea una vez. Debería poder almacenar el estilo en el estado, el oyente probablemente fue la causa de los problemas de rendimiento.
Algo como esto:
componentDidMount: function() { window.addEventListener('scroll', this.handleScroll); }, componentWillUnmount: function() { window.removeEventListener('scroll', this.handleScroll); }, handleScroll: function(event) { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); this.setState({ transform: itemTranslate }); },con ganchos:
import React, { useEffect, useState } from 'react'; function MyApp () { const [offset, setOffset] = useState(0); useEffect(() => { const onScroll = () => setOffset(window.pageYOffset); // clean up code window.removeEventListener('scroll', onScroll); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); console.log(offset); };Puede pasar una función al evento onScroll en el elemento React: https://facebook.github.io/react/docs/events.html#ui-events
<ScrollableComponent onScroll={this.handleScroll} />Otra respuesta similar: https://stackoverflow.com/a/36207913/1255973