如何更新一個(gè)Clock組件的時(shí)間狀態(tài)
- 方法1:setInterval()
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
缺陷:沒有把時(shí)間更新功能封裝至Clock體內(nèi)。
- 方法2:利用props
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);
缺陷: <Clock date={new Date()} />的形式不夠嚴(yán)密，我們希望Clock組件不向外暴露任何和時(shí)間狀態(tài)有關(guān)的接口。
- 方法3 利用state
components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
