Змінні стану in v в змінному стані react.js

Чи краще зберігати посилання на час очікування як змінну екземпляра (this.timeout) або змінну стану (this.state.timeout) у react.js?

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, ви також повинні пам’ятати, що потрібно виконувати демонтаж компонента до того, як буде викликано ваш handLeave.

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); 
     },
    ...
});