Szukam sposobu optymalizacji mojego kodu.

Czy istnieje sposób na użycie tylko 1 zmiennej stanu (rozpoczętych) zamiast 2 (rozpoczęty i teraz)?

To jest mój kod (bardzo prosty zegar):

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'));
0
xRobot 17 luty 2017, 12:01

2 odpowiedzi

Najlepsza odpowiedź

W zależności od tego, jak bardzo zależy Ci na dokładności, możesz po prostu przechowywać coś takiego jak CurrentTicks i przyciągnij go o 1 w funkcji Dotick. Nie ma gwarancji, że każdy interwał jest jednak dokładnie sekundy.

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>

Innym sposobem jest użycie Forceupdate, aby zmusić komponent do Rerder co sekundę, ale tylko przechowywać czas rozpoczęcia. Ogólnie rzecz biorąc, nie sądzę, że to jest świetne i prawdopodobnie lepiej będziesz robić to, co robisz teraz. Oto przykład, jeśli jesteś ciekawy

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>
1
noveyak 17 luty 2017, 09:41

Jeśli nie dbasz o zwiększanie stanu, jest to sposób

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

Sprawdź JSFiddle

1
DroidNoob 17 luty 2017, 09:48