window.onpopstate -이 이벤트 핸들러를 제거해야합니까?

Question

뒤로 및 앞으로 브라우저 단추 이벤트를 수신 대기하려면 이벤트 처리기를 window.onpopstate 사용하고 있습니다. 내 코드는 다음과 같은 :

componentDidMount() { 
    window.onpopstate = this.onBackOrForwardButtonEvent; 
} 

onBackOrForwardButtonEvent = (e) => { 
    e.preventDefault(); 
    log.info('back or forward button pressed'); 
    if (this.props.route.path !== '/app') { 
     // ... do something 
    } 
}; 

내 질문 :이 이벤트 리스너를 제거해야합니까 - 아마도 componentWillUnmount에? 같은

뭔가 : 나는 때 구성 요소 마운트 해제 리스너를 제거 위에서하지만 결코 가지고있는 것처럼 내가 onPopState를 사용하는 예를 본 적이

componentWillUnmount() { 
    window.removeEventListener('onpopstate', this.onBackOrForwardButtonEvent, false) 
} 

.

예 : https://github.com/ReactTraining/react-router/issues/967

Answer 1

나는 당신이 연결된 이벤트의 제거에 대해 걱정하지 괜찮아 생각합니다.

이벤트가 dom 요소가 아닌 창에 첨부되어 있기 때문에 예제가 재미 있습니다. 이 경우에는 이벤트가 기본적으로 존재하기 때문에 이벤트를 제거하지 않는 것이 좋습니다. 구성 요소가 마운트 될 때마다 이미 첨부 된 이벤트에 핸들러를 다시 할당합니다. 당신이 구성 요소의 제거 후 이벤트 나던 화재를 확인하려면 마운트 해제 구성 요소의 경우에 더 합리적 일 수있는 무 조작에 핸들러를 할당

.

componentDidUnmount() { 
    window.onpopstate =() => {} 
} 

dom 이벤트 리스너의 경우에는 다릅니다.

반응 애플 리케이션은 라우터 및 클라이언트 측 탐색을 통해 새로운 요소가 단계적으로 배치되고 이후 사용자가 페이지를 탐색 할 때 마운트 해제되는 단일 페이지 응용 프로그램처럼 작동하는 것이 일반적입니다.

요소는 DOM (또는 마운트 해제)에서 제거

,에 연결된 이벤트 리스너를 제거하는 것이 좋습니다.

는 이벤트 리스너를 제거하지 않으면

는 이벤트가 불필요하게 메모리를 계속 사용합니다 기회가있다.

그것 또한 최신 브라우저는 가비지 컬렉션을 통해 당신을 위해 이것을 전적으로 가능 처리 할 것을 그런데 왜 자신을 당신이 조심해야 할 추가 조치를 취할 수있을 때 어떤 않는 브라우저 알고 귀찮게.