Biến trạng thái v thể hiện trong react.js

Question

Trong react.js, tốt hơn là lưu trữ tham chiếu thời gian chờ dưới dạng biến mẫu (this.timeout) hoặc 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

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 phương pháp làm việc. Tôi chỉ muốn biết lý do sử dụng cái kia.

Answer 1

Tôi đề xuất lưu trữ nó trên cá thể chứ không phải trong số state. Bất cứ khi nào state được cập nhật (chỉ nên được thực hiện bởi setState như được đề xuất trong nhận xét), Phản hồi cuộc gọi render và 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ị timeout không ảnh hưởng đến kết xuất thành phần của bạn, nên không được hiển thị trong state. Đặt nó ở đó sẽ gây ra các cuộc gọi không cần thiết đến render.

Answer 2

Ngoài những gì @ssorallen nói, bạn cũng nên nhớ xử lý thành phần unmounting trước khi handleLeave 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); 
    }, 
    ... 
});