[解決済み] React.jsのonScrollでコンポーネントのスタイルを更新する

質問

私は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 をスクロールコールバックで使用します。しかし、これではスクロールが恐ろしく遅くなり、使い物にならない。

何かいい方法はないでしょうか？

どのように解決するのですか？

リスナーを 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
    });
},