Biến trạng thái phiên bản v trong react.js

Trong react.js, tốt hơn nên lưu trữ một tham chiếu timeout dưới dạng biến instance (this.timeout) hoặc một biến trạng thái (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); 
     }
    ...
})

hoặc là

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

cả hai cách tiếp cận này đều hoạt động. Tôi chỉ muốn biết lý do sử dụng cái này hơn cái kia.

Tôi đề nghị lưu trữ nó trên phiên bản nhưng không lưu trữ trong nó state. Bất cứ khi nào stateđược cập nhật (chỉ nên được thực hiện theo setStateđề xuất trong nhận xét), React sẽ gọi rendervà thực hiện bất kỳ thay đổi cần thiết nào đối với DOM thực.

Bởi vì giá trị của timeoutkhông ảnh hưởng đến việc hiển thị thành phần của bạn, nó sẽ không tồn tại state. Đặt nó ở đó sẽ gây ra các cuộc gọi không cần thiết render.

Ngoài những gì @ssorallen đã nói, bạn cũng nên nhớ xử lý việc ngắt kết nối thành phần trước khi xử lý HandLeave của bạn được gọi.

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