React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。
添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
将使Clock设置自己的计时器并每秒更新一次。将生命周期方法添加到类中，在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候，都想生成定时器，这在 React 中被称为挂载。同样，每当 Clock 生成的这个 DOM 被移除的时候，也会想要清除定时器，这在 React 中被称为卸载。
可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：
React 实例
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。
在组件输出到 DOM 后会执行 componentDidMount() 钩子，就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，可以在 componentWillUnmount() 钩子中卸载定时器。
网友评论