如何避免在我的情況下使用2個狀態變量？

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加一。但不能保證每個間隔只是一秒。

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'));

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

另一種方法是使用forceUpdate迫使組件重新呈現每一秒，但只存儲開始時間。總的來說，我認爲這不是很好，而且你現在可能會做更好的事情。下面是一個例子，如果你是好奇

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'));

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

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

方式