Cập nhật kiểu của một thành phần onScroll trong React.js

Tôi đã xây dựng một thành phần trong React, được cho là cập nhật kiểu riêng của nó trên cuộn cửa sổ để tạo hiệu ứng thị sai.

renderPhương thức thành phần trông như thế này:

  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>
    );
  }

Điều này không hoạt động vì React không biết rằng thành phần đã thay đổi và do đó thành phần này không được đăng ký lại.

Tôi đã thử lưu trữ giá trị itemTranslateở trạng thái của thành phần và gọisetState trong cuộc gọi lại cuộn. Tuy nhiên, điều này làm cho việc cuộn không thể sử dụng được vì điều này rất chậm.

Bất kỳ đề nghị về cách làm điều này?

Bạn nên ràng buộc người nghe componentDidMounttheo cách đó chỉ được tạo một lần. Bạn sẽ có thể lưu trữ phong cách ở trạng thái, người nghe có lẽ là nguyên nhân của vấn đề hiệu suất.

Một cái gì đó như thế này:

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
    });
},

Bạn có thể chuyển một hàm cho onScrollsự kiện trên phần tử React: https://facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

Một câu trả lời khác cũng tương tự: https://stackoverflow.com/a/36207913/1255973

Giải pháp của tôi để tạo một thanh điều hướng phản hồi (vị trí: 'tương đối' khi không cuộn và cố định khi cuộn và không ở đầu trang)

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(event) {
    if (window.scrollY === 0 && this.state.scrolling === true) {
        this.setState({scrolling: false});
    }
    else if (window.scrollY !== 0 && this.state.scrolling !== true) {
        this.setState({scrolling: true});
    }
}
    <Navbar
            style={{color: '#06DCD6', borderWidth: 0, position: this.state.scrolling ? 'fixed' : 'relative', top: 0, width: '100vw', zIndex: 1}}
        >

Không có vấn đề hiệu suất cho tôi.

để giúp đỡ bất cứ ai ở đây nhận thấy các vấn đề về hành vi / hiệu suất chậm khi sử dụng câu trả lời của Austins và muốn có một ví dụ sử dụng các ref được đề cập trong các bình luận, đây là một ví dụ tôi đang sử dụng để chuyển đổi một lớp cho biểu tượng cuộn lên / xuống:

Trong phương thức kết xuất:

<i ref={(ref) => this.scrollIcon = ref} className="fa fa-2x fa-chevron-down"></i>

Trong phương thức xử lý:

if (this.scrollIcon !== null) {
  if(($(document).scrollTop() + $(window).height() / 2) > ($('body').height() / 2)){
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-up');
  }else{
    $(this.scrollIcon).attr('class', 'fa fa-2x fa-chevron-down');
  }
}

Và thêm / xóa trình xử lý của bạn giống như cách Austin đã đề cập:

componentDidMount(){
  window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount(){
  window.removeEventListener('scroll', this.handleScroll);
},

tài liệu về các ref .

Tôi thấy rằng tôi không thể thêm thành công người nghe sự kiện trừ khi tôi vượt qua đúng như vậy:

componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll, true);
},

Một ví dụ sử dụng classNames , React hook useEffect , useState và styled-jsx :

import classNames from 'classnames'
import { useEffect, useState } from 'react'

const Header = _ => {
  const [ scrolled, setScrolled ] = useState()
  const classes = classNames('header', {
    scrolled: scrolled,
  })
  useEffect(_ => {
    const handleScroll = _ => { 
      if (window.pageYOffset > 1) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }
    window.addEventListener('scroll', handleScroll)
    return _ => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])
  return (
    <header className={classes}>
      <h1>Your website</h1>
      <style jsx>{`
        .header {
          transition: background-color .2s;
        }
        .header.scrolled {
          background-color: rgba(0, 0, 0, .1);
        }
      `}</style>
    </header>
  )
}
export default Header

với móc

import React, { useEffect, useState } from 'react';

function MyApp () {

  const [offset, setOffset] = useState(0);

  useEffect(() => {
    window.onscroll = () => {
      setOffset(window.pageYOffset)
    }
  }, []);

  console.log(offset); 
};

Ví dụ thành phần chức năng sử dụng useEffect:

Lưu ý : Bạn cần xóa trình lắng nghe sự kiện bằng cách trả về chức năng "dọn sạch" trong useEffect. Nếu bạn không, mỗi khi thành phần cập nhật, bạn sẽ có một trình nghe cuộn cửa sổ bổ sung.

import React, { useState, useEffect } from "react"

const ScrollingElement = () => {
  const [scrollY, setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logit);
    };
  }, []);

  return (
    <div className="App">
      <div className="fixed-center">Scroll position: {scrollY}px</div>
    </div>
  );
}

Nếu điều bạn quan tâm là một thành phần con đang cuộn, thì ví dụ này có thể hữu ích: https://codepen.io/JohnReynolds57/pen/NLNOyO?editors=0011

class ScrollAwareDiv extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.state = {scrollTop: 0}
  }

  onScroll = () => {
     const scrollTop = this.myRef.current.scrollTop
     console.log(`myRef.scrollTop: ${scrollTop}`)
     this.setState({
        scrollTop: scrollTop
     })
  }

  render() {
    const {
      scrollTop
    } = this.state
    return (
      <div
         ref={this.myRef}
         onScroll={this.onScroll}
         style={{
           border: '1px solid black',
           width: '600px',
           height: '100px',
           overflow: 'scroll',
         }} >
        <p>This demonstrates how to get the scrollTop position within a scrollable 
           react component.</p>
        <p>ScrollTop is {scrollTop}</p>
     </div>
    )
  }
}

Tôi đã giải quyết vấn đề thông qua việc sử dụng và sửa đổi các biến CSS. Bằng cách này, tôi không phải sửa đổi trạng thái thành phần gây ra vấn đề về hiệu suất.

index.css

:root {
  --navbar-background-color: rgba(95,108,255,1);
}

Navbar.jsx

import React, { Component } from 'react';
import styles from './Navbar.module.css';

class Navbar extends Component {

    documentStyle = document.documentElement.style;
    initalNavbarBackgroundColor = 'rgba(95, 108, 255, 1)';
    scrolledNavbarBackgroundColor = 'rgba(95, 108, 255, .7)';

    handleScroll = () => {
        if (window.scrollY === 0) {
            this.documentStyle.setProperty('--navbar-background-color', this.initalNavbarBackgroundColor);
        } else {
            this.documentStyle.setProperty('--navbar-background-color', this.scrolledNavbarBackgroundColor);
        }
    }

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    render () {
        return (
            <nav className={styles.Navbar}>
                <a href="/">Home</a>
                <a href="#about">About</a>
            </nav>
        );
    }
};

export default Navbar;

Navbar.module.css

.Navbar {
    background: var(--navbar-background-color);
}

Đặt cược của tôi ở đây là sử dụng các thành phần Hàm với các móc mới để giải quyết nó, nhưng thay vì sử dụng useEffectnhư trong các câu trả lời trước, tôi nghĩ rằng tùy chọn chính xác sẽ là useLayoutEffectvì một lý do quan trọng:

Chữ ký này giống hệt với useEffect, nhưng nó kích hoạt đồng bộ sau tất cả các đột biến DOM.

Điều này có thể được tìm thấy trong tài liệu React . Nếu chúng tôi sử dụng useEffectthay thế và chúng tôi tải lại trang đã được cuộn, cuộn sẽ là sai và lớp của chúng tôi sẽ không được áp dụng, gây ra một hành vi không mong muốn.

Một ví dụ:

import React, { useState, useLayoutEffect } from "react"

const Mycomponent = (props) => {
  const [scrolled, setScrolled] = useState(false)

  useLayoutEffect(() => {
    const handleScroll = e => {
      setScrolled(window.scrollY > 0)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  ...

  return (
    <div className={scrolled ? "myComponent--scrolled" : ""}>
       ...
    </div>
  )
}

Một giải pháp khả thi cho vấn đề có thể là https://codepen.io/dcalderon/pen/mdJzOYq

const Item = (props) => { 
  const [scrollY, setScrollY] = React.useState(0)

  React.useLayoutEffect(() => {
    const handleScroll = e => {
      setScrollY(window.scrollY)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <div class="item" style={{'--scrollY': `${Math.min(0, scrollY/3 - 60)}px`}}>
      Item
    </div>
  )
}

Dưới đây là một ví dụ khác sử dụng phông chữ HOOKSAwgieIcon và Kendo UI React
[! [Ảnh chụp màn hình tại đây] [1]] [1]

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';


const ScrollBackToTop = () => {
  const [show, handleShow] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 1200) {
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener('scroll');
    };
  }, []);

  const backToTop = () => {
    window.scroll({ top: 0, behavior: 'smooth' });
  };

  return (
    <div>
      {show && (
      <div className="backToTop text-center">
        <button className="backToTop-btn k-button " onClick={() => backToTop()} >
          <div className="d-none d-xl-block mr-1">Top</div>
          <FontAwesomeIcon icon="chevron-up"/>
        </button>
      </div>
      )}
    </div>
  );
};

export default ScrollBackToTop;```


  [1]: https://i.stack.imgur.com/ZquHI.png

Cập nhật câu trả lời với React Hook

Đây là hai móc - một cho hướng (lên / xuống / không) và một cho vị trí thực tế

Sử dụng như thế này:

useScrollPosition(position => {
    console.log(position)
  })

useScrollDirection(direction => {
    console.log(direction)
  })

Dưới đây là các móc:

import { useState, useEffect } from "react"

export const SCROLL_DIRECTION_DOWN = "SCROLL_DIRECTION_DOWN"
export const SCROLL_DIRECTION_UP = "SCROLL_DIRECTION_UP"
export const SCROLL_DIRECTION_NONE = "SCROLL_DIRECTION_NONE"

export const useScrollDirection = callback => {
  const [lastYPosition, setLastYPosition] = useState(window.pageYOffset)
  const [timer, setTimer] = useState(null)

  const handleScroll = () => {
    if (timer !== null) {
      clearTimeout(timer)
    }
    setTimer(
      setTimeout(function () {
        callback(SCROLL_DIRECTION_NONE)
      }, 150)
    )
    if (window.pageYOffset === lastYPosition) return SCROLL_DIRECTION_NONE

    const direction = (() => {
      return lastYPosition < window.pageYOffset
        ? SCROLL_DIRECTION_DOWN
        : SCROLL_DIRECTION_UP
    })()

    callback(direction)
    setLastYPosition(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

export const useScrollPosition = callback => {
  const handleScroll = () => {
    callback(window.pageYOffset)
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  })
}

Để mở rộng câu trả lời của @ Austin, bạn nên thêm this.handleScroll = this.handleScroll.bind(this)vào hàm tạo của mình:

constructor(props){
    this.handleScroll = this.handleScroll.bind(this)
}
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
    });
},
...

Điều này cho phép handleScroll()truy cập vào phạm vi thích hợp khi được gọi từ người nghe sự kiện.

Ngoài ra, hãy lưu ý rằng bạn không thể thực hiện .bind(this)trong addEventListenerhoặc removeEventListenerphương thức bởi vì mỗi phương thức sẽ trả về các tham chiếu đến các chức năng khác nhau và sự kiện sẽ không bị xóa khi thành phần ngắt kết nối.