Правильно ли так отслеживать viewport?

Question

[Nikita Shchypylov]

Всем привет
Хочу реализовать смену блоков меню при ресайзе на Реакте. Такая реализация имеет месть быть?

constructor(props) {
    super(props);
    this.state = {width: "0", height: "0"}
  }
  
  componentDidMount() {
    this.updateResize();
    window.addEventListener('resize', this.updateResize);
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateResize);
  }
  
  updateResize = () => {
    this.setState({width: window.innerWidth, height: window.innerHeight});
  }

И потом на основе стейта в return() :

{(width >= 1024) ? <div>hello</div>:<div>boy</div>}

Comments

[Владимир]

А чем не подходит https://developer.mozilla.org/ru/docs/Web/CSS/Medi... ?
Я так думаю даже если и отслеживать ресайз, нужно debouncing или throttling делать
https://css-tricks.com/the-difference-between-thro...

Answer 1

[Антон Спирин]

Можно использовать applyContainerQuery из react-container-query.
Это будет лучше, чем по всему приложению ставить и снимать слушатели в функциях жизненного цикла.

import { applyContainerQuery } from 'react-container-query';
import { Hello, Boy, Wrapper } from '../somePlace';

const myQuery = {
  hasMinWidth: {
    minWidth: 1024,
  },
};

class MyComponent extends Component {
  ...
  render() {
    const {
      containerQuery: { hasMinWidth },
    } = this.props;

    return (
      <Wrapper>
        {hasMinWidth ? <Hello /> : <Boy />}
      </Wrapper>
    );
  }
}

export default applyContainerQuery(MyComponent, myQuery);

Comments

[Nikita Shchypylov]

Большое спасибо :)
Как всегда, выручаете

[Nikita Shchypylov]

Можете дать ответ на еще один вопрос?

Я перехожу с джи-джиквери, поэтому постоянно хочу манипулировать домом из функций
Это моветон в Реакте?
Например, хочу вызвать что-то по клику на элемент.
Можно сделать дать вызов функции через атрибут onClick реакта (правильный выбор), или повесить addEventListener. Большая ли разница и чем чревато?