ตัวแปรสถานะของอินสแตนซ์ v ใน react.js

ใน 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และทำการเปลี่ยนแปลงที่จำเป็นกับ 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); 
     },
    ...
});