Sono ancora abbastanza nuovo in React, ma sto procedendo lentamente e ho riscontrato qualcosa su cui sono bloccato.
Sto cercando di costruire un componente "timer" in React e, ad essere onesto, non so se lo sto facendo bene (o in modo efficiente). Nel mio codice qui sotto, ho impostato lo stato per restituire un oggetto { currentCount: 10 }
e hanno accarezzato componentDidMount
, componentWillUnmount
e render
e posso solo lo Stato a "conto alla rovescia" 10-9.
Domanda in due parti: cosa sto sbagliando? E c'è un modo più efficiente di usare setTimeout (piuttosto che usare componentDidMount
& componentWillUnmount
)?
Grazie in anticipo.
import React from 'react';
var Clock = React.createClass({
getInitialState: function() {
return { currentCount: 10 };
},
componentDidMount: function() {
this.countdown = setInterval(this.timer, 1000);
},
componentWillUnmount: function() {
clearInterval(this.countdown);
},
timer: function() {
this.setState({ currentCount: 10 });
},
render: function() {
var displayCount = this.state.currentCount--;
return (
<section>
{displayCount}
</section>
);
}
});
module.exports = Clock;
this.timer.bind(this)
come this.timer da solo non funzionava
class Clock extends Component
non si autobind . Quindi dipende da come si creano i componenti se è necessario eseguire il binding.
bind(this)
non è più necessario, reagire lo fa da solo ora.