我在 React 中构建了一个组件,它应该在窗口滚动时更新自己的样式以创建视差效果。
组件render方法如下所示:
render
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> ); }
这不起作用,因为 React 不知道组件已更改,因此不会重新渲染组件。
我尝试将 的值存储在itemTranslate组件的状态中,并调用setState滚动回调。然而,这使得滚动无法使用,因为这非常慢。
itemTranslate
setState
关于如何做到这一点的任何建议?
您应该将侦听器绑定在 中componentDidMount,这样它只会创建一次。您应该能够将样式存储在状态中,侦听器可能是性能问题的原因。
componentDidMount
像这样的东西:
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 }); },