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コメントで提案されているようにのみ行うrender必要があります）、Reactが呼び出して、実際の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); 
     },
    ...
});