javascript - 平滑 React 组件中的视差

Question

我有一个带有简单视差的 React 组件，可以更改顶部和不透明度值。问题是滚动动画有点不稳定。有什么办法可以平滑过渡吗？我在 vanilla JS 中使用 requestAnimationFrame() ，但我认为我不能在 React 组件中使用它，因为渲染周期不同。

此外，一旦元素离开视口(viewport)，如何停止更改状态？

这是我的实现:

const Parallax = React.createClass({
  getInitialState: function () {
    return {
      top: 0,
      opacity: 1
    };
  },

  parallax: function(event) {
    const scrollTop = window.pageYOffset;
    const elementHeight = this.splash.clientHeight;

    this.setState({ top: scrollTop * .7 + 'px' });
    this.setState({ opacity: (elementHeight - scrollTop) / elementHeight });
  },

  componentDidMount: function() {
    window.addEventListener('scroll', this.parallax);
  },

  componentWillUnmount: function() {
    window.removeEventListener('scroll', this.parallax);
  },

  render: function() {
    const splashStyle = { 
      transform: 'translateY(' + this.state.top +')',
      opacity: this.state.opacity
    };

    return (
      <div className="splash" 
        ref={ domElement => { this.splash = domElement; }}>

        <div className="splash__wrapper " style={ splashStyle }>
            <p>LONG CONTENT</p>
        </div>

      </div>
    );
  }

});

ReactDOM.render(
  <Parallax />,
  document.getElementById('container')
);

.splash {
      position: relative;
      width: 100vw;
      max-width: 100%;
      height: 100vh;
      min-height: 500px;
      background: url(https://facebook.github.io/react/img/logo_og.png) no-repeat 10% 60%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .splash__wrapper {
      position: absolute;
      color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: 0s transform;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

更新:

Splash 组件位于页面顶部，因此我能够通过以下方式将状态更改限制为元素处于 View 中时。在提高滚动性能方面运气不佳。

if (scrollTop < elementHeight) {
  this.setState({ top: scrollTop * .7 + 'px' });
  this.setState({ opacity: (elementHeight - scrollTop) / elementHeight });
}

Answer 1

用户滚动页面会触发大量滚动事件。您不想对每个滚动事件使用react，而是将它们分组，例如每 1000 毫秒一次。

这称为 throttle 。 lodash library有一个很好的节流方法，但还存在其他方法。

包含 lodash 库后，您的事件监听器将如下所示......

window.addEventListener('scroll', _.throttle(this.parallax, 1000));