javascript - React.js 组件 : user defined properties. 我做得对吗？

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

经验法则是，如果它影响渲染，它必须在状态或 Prop 中。否则实例属性是可行的方法。