React.js 구성 요소 : 사용자 정의 속성. 내가 제대로하고 있니?

Question

방금 ​​React를 배우기 시작했고, 임의의 변수를 저장하는 방법을 알고 싶습니다. 다음 예제를 살펴 보겠습니다.

var StaffRow = React.createClass({ 
    doubleClickTimeout: null, 
    waitingForDoubleClick: false, 
    doubleClick: function(e){ 
     console.log('doubleClick'); 
    }, 
    singleClick: function(e){ 
     console.log('singleClick'); 
    }, 

    clickHandler: function(e){ 
     if(this.waitingForDoubleClick) 
     { 
      this.waitingForDoubleClick = false; 
      clearTimeout(this.doubleClickTimeout); 
      this.doubleClick(e); 
     } else { 
      this.waitingForDoubleClick = true; 
      this.doubleClickTimeout = setTimeout(function() { 
       this.waitingForDoubleClick = false; 
       this.singleClick(e); 
      }.bind(this), 300); 
     } 
    }, 

    render: function() { 
     var name = "Some Name"; 
     return (
      <li onClick={this.clickHandler} > 
       <span>{name}</span> 
      </li> 
     ); 
    } 
}); 

클릭/이중 클릭 핸들러를 구현하고 있습니다. 이것은 잘 작동하지만, 이것이 임의의 속성 (doubleClickTimeout 및 waitingForDoubleClick)을 저장하는 올바른 방법인지 알고 싶습니다. 또는 인식하지 못하는 React 구성 요소 인스턴스를 오염시키는 몇 가지주의 사항이 있습니까? 감사. 필요한 것은 아니지만

Answer 1

, 나는 선 2와 3 제거 할 것 :

doubleClickTimeout: null, 
waitingForDoubleClick: false, 

을 그리고 componentWillMount에서 그들을 설정합니다. 이유는 이들이 객체/배열 인 경우 위의 코드를 사용하여 모든 인스턴스에서 공유되며 componentWillMount는 함수이므로 클린 참조가됩니다.

componentWillMount: function(){ 
    this.doubleClickTimeout = null; 
    this.waitingForDoubleClick = false; 
} 

어림짐작은 렌더링에 영향을 주면 상태 또는 소품이어야합니다. 그렇지 않으면 인스턴스 속성이 이동하는 방법입니다.