在React.js中更新组件onScroll的样式

小编典典

在React.js中更新组件onScroll的样式

javascript

我已经在React中构建了一个组件，该组件应该在窗口滚动时更新其自身的样式以创建视差效果。

组件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在滚动回调中调用。但是，这使滚动无法使用，因为这非常慢。

关于如何做到这一点的任何建议？

阅读 327

2020-05-01

共1个答案

小编典典

您应该在中绑定侦听器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
    });
},

2020-05-01