Question

我正在寻找一种优化代码的方法。

有没有办法只使用1个状态变量（已启动）而不是2（已开始和现在）？

这是我的代码（一个非常简单的计时器）：

var Timer = React.createClass({
  getInitialState: function () {
    return {
      started: new Date().getTime(),
      now: 0
    }
  },
  render: function () {
    return (
      <div>
        <strong>{this.state.now}</strong>
        <button type="button" onClick={this.resetCounter}>Reset</button>
      </div>
    );
  },
  componentDidMount: function () {
    this.tickInterval = setInterval(this.doTick, 1000);
  },
  componentWillUnmount: function () {
    clearInterval(this.tickInterval);
  },
  doTick: function () {
    let newDate = new Date().getTime();
    let newCounter = Math.round((newDate - this.state.started) / 1000);
    this.setState({ now: newCounter });
  },
  resetCounter: function () {
    this.setState({ started: new Date().getTime(), now: 0 });
  },
});

ReactDOM.render(<Timer />, document.getElementById('root'));

Answer 1

根据您对准确度的关注程度，您可以存储类似currentTicks的内容，并在doTick函数中将其递增1。不能保证每个间隔恰好是一秒钟。

＆＃13;

var Timer = React.createClass({


getInitialState: function () {
    return {
      tick: 0,
    }
},

render: function () {
    return (
        <div>
            <strong>{this.state.tick}</strong>
            &nbsp;
            <button type="button" onClick={this.resetCounter}>Reset</button>
        </div>
    );
},


componentDidMount: function () {
    this.tickInterval = setInterval(this.doTick, 1000);
},


componentWillUnmount: function () {
    clearInterval(this.tickInterval);
},

doTick: function () {
    this.setState({ tick: this.state.tick + 1 });
},
resetCounter: function () {
    this.setState({
      tick: 0
    });
},

});

ReactDOM.render(<Timer />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
<!-- my app renders here -->
</div>

＆＃13;

另一种方法是使用forceUpdate强制组件每秒重新渲染，但只存储开始时间。总的来说，我并不认为这很好，你可能会更好地做你现在正在做的事情。如果你好奇，这是一个例子

＆＃13;

var Timer = React.createClass({

componentWillMount() {
  this.forceUpdate = this.forceUpdate.bind(this);
},
  
getInitialState: function () {
    return {
      timeStarted: Date.now(),
    }
},

render: function () {
    return (
        <div>
            <strong>{Math.round((Date.now() - this.state.timeStarted) / 1000)}</strong>
            &nbsp;
            <button type="button" onClick={this.resetCounter}>Reset</button>
        </div>
    );
},


componentDidMount: function () {
    this.tickInterval = setInterval(this.forceUpdate, 1000);
},

componentWillUnmount: function () {
    clearInterval(this.tickInterval);
},

resetCounter: function () {
    this.setState({
      timeStarted: Date.now()
    });
},

});

ReactDOM.render(<Timer />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
<!-- my app renders here -->
</div>

＆＃13;

Answer 2

如果你不关心递增状态，这就是要走的路

var Timer = React.createClass({

    getInitialState: function () {
        return {
            started: 0,
        }
    },


    render: function () {

        return (
            <div>
                <strong>{this.state.started}</strong>
                &nbsp;
                <button type="button" onClick={this.resetCounter}>Reset</button>
            </div>
        );
    },


    componentDidMount: function () {
        this.tickInterval = setInterval(this.doTick, 1000);
    },


    componentWillUnmount: function () {
        clearInterval(this.tickInterval);
    },

    doTick: function () {
        this.setState({ started:this.state.started+1});
    },
    resetCounter: function () {
        this.setState({ started:0});
    },

    });



    ReactDOM.render(<Timer />, document.getElementById('root'));

查看jsfiddle

在我的情况下如何避免使用2状态变量？

2 个答案: