Почему в React подписаны события API-интерфейса браузера в componentDidMount?

Question

В этом выступлении https://reactjs.org/docs/hooks-intro.html говорящий пишет коды, которые похожи на это:

class SomeComponent extends React.Component {
     constructor(props){
         super(props)
         this.handleResize.bind(this)
     }

     handleResize(){
          //do something with window.innerWidth
     }

     componentDidMount(){
         window.addEventListener('resize',this.handleResize)
     }
}

Почему window.addEventListener часть в componentDidMount? Это должно быть?

Исходя из тона разговора, я чувствовал, что эта ситуация довольно распространена.

Я довольно новичок, чтобы отреагировать, и я бы поместил подписку на события браузера API в конструкторе просто а также.

Есть ли какое-либо преимущество, которое можно было бы ускользнуть от того, зачем помещать этот window.addEventListener в componentDidMount? Или это просто для удобства чтения?

Answer 1

Для меня это довольно просто.

Во-первых, вы хотите, чтобы вызовы API / прослушиватели событий API вызывались / инициализировались только один раз , componentDidMount() и constructor гарантированно запускались только один раз на смонтированный компонент.

Однако я не буду помещать api в конструктор, потому что если вы хотите обновить пользовательский интерфейс после того, как ваши данные возвращаются из api, y вам нужно изменить состояние, в то время как вы не можете установить состояние в constructor. Единственное место, которое запускается только один раз и позволяет установить setState - это componentDidMount().

Для слушателей событий, я думаю, его можно вставить в constructor / componentDidMount. Тем не менее, официальные документы рекомендуют помещать в componentDidMount(). Взгляните на this .

componentDidMount вызывается после монтирования компонента и имеет представление DOM. Это часто место, где вы можете прикрепить общие c события DOM.

Answer 2

В общем случае, конструкторы не должны иметь побочных эффектов .

А также Реагировать с документацией уже упоминалось это:

Избегать введение любых побочных эффектов или подписок в конструкторе. В этих случаях используйте вместо этого componentDidMount ().

Answer 3

Значение window.addEventListener определяется в жизненном цикле componentDidMount, поскольку код, определенный внутри componentDidMount, выполняется после обработки DOM . И это был бы подходящий момент, чтобы попытаться присоединить любой обработчик событий к элементу, который является частью DOM.

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

Подробнее здесь

Answer 4

Существует несколько причин, по которым componentDidMount()

На практике componentDidMount является лучшим местом для вызовов для получения данных по нескольким причинам.

1- Если вы хотите подпишитесь и отмените подписку на вашу функцию, затем вам нужно вызвать эту функцию в componentDidMount() и отменить (после всех операций) вызов в componentWillUnmount()

2 - Использование didMount дает понять, что данные не будут загружены до после первоначального рендера. Это напоминает вам о правильной настройке начального состояния, поэтому вы не получите неопределенное состояние, которое вызывает ошибки.

3- componentDidMount() метод жизненного цикла вызывается после render(), чтобы убедиться в успешной загрузке DOM.

window.addEventListener ('resize', this.handleResize) => Вы также можете вызывать конструктор, но позже, если вам нужно отписаться, не можете сделать, потому что это начальная фаза (вызывается только изначально).