react.js의 인스턴스 v 상태 변수

react.js에서 타임 아웃 참조를 인스턴스 변수 (this.timeout) 또는 상태 변수 (this.state.timeout)로 저장하는 것이 더 낫습니까?

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.timeout); 
     }
    ...
})

또는

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.state.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.state.timeout); 
     }
    ...
})

이 두 가지 접근 방식이 모두 작동합니다. 하나를 사용하는 이유를 알고 싶습니다.

인스턴스에 저장하는 것이 좋지만 state. state업데이트 될 때마다 ( setState댓글에서 제안한 대로만 수행해야 함 ) React render는 실제 DOM을 호출 하고 필요한 변경을 수행합니다.

의 값은 timeout구성 요소의 렌더링에 영향을주지 않으므로 state. 거기에두면 불필요한 호출이 발생합니다 render.

@ssorallen이 말한 것 외에도 handleLeave가 호출되기 전에 컴포넌트 마운트 해제를 처리하는 것을 기억해야합니다.

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         this._timeout = setTimeout(function () {
             this.openWidget();
         }.bind(this), DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this._timeout); 
     },
     componentWillUnmount: function(){
        // Clear the timeout when the component unmounts
        clearTimeout(this._timeout); 
     },
    ...
});