나는 여전히 React에서 상당히 새롭지 만 천천히 진행하면서 내가 붙어있는 무언가를 만났습니다.
저는 React에서 "타이머"구성 요소를 구축하려고합니다. 솔직히 말해서 제가이 작업을 올바르게 수행하고 있는지 (또는 효율적으로) 수행하고 있는지 모르겠습니다. 아래에있는 내 코드에서, 나는 개체를 반환 상태를 설정 { currentCount: 10 }
하고 놀겠다는 거를하고있다 componentDidMount
, componentWillUnmount
그리고 render
나는 10에서 9 "카운트 다운"의 상태를 얻을 수 있습니다.
두 부분으로 구성된 질문 : 내가 잘못한 것은 무엇입니까? 그리고 ( componentDidMount
&를 사용하는 대신) setTimeout을 사용하는 더 효율적인 방법이 componentWillUnmount
있습니까?
미리 감사드립니다.
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;
bind(this)
더 이상 필요하지 않습니다. 리 액트는 지금이 작업을 자체적으로 수행합니다.