반응 구성 요소가 마운트 해제되었는지 확인하는 방법이 있습니까?

Question

나는 내 반응 구성 요소를 마운트 해제해야하는 유스 케이스가 있습니다. 그러나 경우에 따라 특정 반응 구성 요소가 다른 기능에 의해 마운트 해제됩니다. 따라서 컴포넌트를 마운트 해제하기 전에 컴포넌트가 마운트되었는지 확인해야합니다. isMounted() 공식적으로 사용되지 않기 때문에

Answer 1

, 당신은 당신의 요소에서이 작업을 수행 할 수 있습니다

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

자신의 state 변수를 유지하는이 패턴은 ReactJS 문서에 자세히 설명되어 있습니다 : 내가 발견 https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

구성 요소가 마운트 해제되고, 생성하십시오.이 변수를 채우십시오.

if(!this._calledComponentWillUnmount)this.setState({vars});

Answer 3

내가 막을 길을 찾고 있었기 때문에 여기에 올랐다. polling API를 중지했다.

react docs은 websocket 케이스를 담당하지만 폴링 이벤트는 커버하지 않습니다.

나는 그것이 작동

// React component 
let allowPolling = true 

React.createClass({ 
    poll() { 
     if (!allowPolling) { 
      return 
     } 
     // otherwise, call the api 
    } 
    componentWillMount() { 
     allowPolling = true 
    } 
    componentWillUnmount() { 
     allowPolling = false 
    } 
}) 

해결할 방법. 희망은 도움이

,

Answer 4

내가하기 Shubham의 대답은 사용을 중지 자신의 코드를 전환해야하는 사람들을위한 반응에 의해 제안 해결 방법이라고 생각] = 너희들이에 대한 모든 실패한 테스트 케이스를 알고 있다면 알려 주시기 바랍니다 isMounted 안티 패턴.

이것은 반드시 나쁜 것은 아니지만이 문제에 대한 실제 해결책을 나열 해 두는 것이 좋습니다.

The article linked by Shubham은이 안티 패턴을 피하기위한 2 가지 제안을 제공합니다. 필요한 것은 구성 요소가 마운트 해제 될 때 setState를 호출하는 이유에 따라 다릅니다. 당신이 당신의 구성 요소의 플럭스 저장소를 사용하는 경우

, 당신은

class MyComponent extends React.Component { 
    componentDidMount() { 
    mydatastore.subscribe(this); 
    } 
    render() { 
    ... 
    } 
    componentWillUnmount() { 
    mydatastore.unsubscribe(this); 
    } 
} 

당신이 ES6, 당신은 만들기 위하여 당신의 약속을 포장해야 할 수 있습니다 약속 사용하는 경우 componentWillUnmount에서 탈퇴해야한다 취소 할 수 있습니다.

const cancelablePromise = makeCancelable(
    new Promise(r => component.setState({...}})) 
); 

cancelablePromise 
    .promise 
    .then(() => console.log('resolved')) 
    .catch((reason) => console.log('isCanceled', reason.isCanceled)); 

cancelablePromise.cancel(); // Cancel the promise 

링크 된 문서에서 자세한에 대한 makeCancelable을 읽어보십시오.

결론적으로 변수를 설정하고 구성 요소가 탑재되었는지 확인하여이 문제를 해결하지 마십시오. 문제의 근원으로 이동하십시오. 다른 일반적인 경우를 생각해 볼 수 있으면 의견을 말하십시오.