Преобразование компонента класса в компонент функции в reactJS - PullRequest
Новая
       81

Преобразование компонента класса в компонент функции в reactJS

0 голосов
/ 04 мая 2020

Я хотел бы сделать эффект параллакса в реакции.

Я нашел учебник на среде , в котором объясняется, как.

Мой код написан в функциональном компоненте , но в примере это компонент класса.

Вот пример 

class Header extends React.Component {
  constructor() {
    super()

    this.state = {
      offset: 0
    };
  }
return (
  <header 
    className='header-background'
    style={{ backgroundPositionY: this.state.offset}}
  >
    <section
      className='info-container'
      style={{ bottom: this.state.offset / 2 }}
    >
      <h1>Kevin Simpson</h1>
      <h3>Front End Developer</h3>
    </section>
  </header>
)
}

componentDidMount() {
  window.addEventListener('scroll', this.parallaxShift);
}
componentWillUnmount() {
  window.removeEventListener('scroll', this.parallaxShift);
}
parallaxShift = () => {
  this.setState({
    offset: window.pageYOffset
  });
};

Я преобразовал его в функциональный с моими знаниями 

const [offset, setOffset] = useState(0);
useEffect(() => {
    window.addEventListener('scroll', setOffset(window.pageYOffset));
});
return (
  ...
  <svg style={{ bottom: offset }} className="border-circle" width={107} height={107} viewBox="0 0 107 107" >
  ....

На самом деле нет setOffset срабатывает при прокрутке, слушатель событий не вызывает события.

1 Ответ

1 голос
/ 04 мая 2020

Я вижу три проблемы с вашим кодом

  1. Вы не удаляете своего слушателя. Это может вызвать утечку памяти, то есть проблемы с производительностью.
  2. Второй параметр addEventListener должен быть определением функции, а не вызовом функции.

  3. useEffect выполняется при каждом обновлении компонента. Чтобы иметь ту же функциональность, что и componentDidMount, добавьте пустой массив в качестве второго параметра useEffect, чтобы он вызывался только один раз после инициализации / монтирования компонента.

    useEffect (() => {window.addEventListener ('scroll', () => setOffset (window.pageYOffset)); return () => window.removeEventListener ('scroll', () => setOffset (window.pageYOffset));}, []);

Написание вашего useEffect, как это должно работать

...