Как в React повесить DOM-событие на window или document?

Как в React повесить DOM-событие на window или document?


18.09.2018
/
oberset

Иногда внутри React-компонента требуется повесить DOM-событие на window или document, например, если нужно добавить обработчик события resize или scroll окна браузера. Лучше всего для этих целей подойдут методы жизненного цикла компонента componentDidMount и componentWillUnmount:
class MyComponent extends Component {
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}

handleResize = (event) => {
// todo something
};
}

После инициализации компонента мы вешаем обработчик на событие resize, после удаления компонента из DOM-дерева, мы этот обработчик удаляем. События для документа добавляются аналогичным образом.

Композиция с помощью HOC (Higher Order Component) в React

Компонент высшего порядка в React (Higher Order Component или сокращенно HOC) – это простая javascript-функция, которая принимает на вход один или несколько компонентов и возвращает другой компонент.

Сохранение состояния в React Component: особенности работы метода setState

Прежде всего давайте разберемся, что такое внутреннее состояние компонента в React и для чего оно может понадобиться. После этого поговорим об особенностях работы метода setState.

Разбираемся со связкой React и Redux на простейшем примере

Простой пример, который поможет быстро разобраться, как управлять данными с помощью библиотеки Redux в ваших приложениях на React.