前言
之前接触过后端，对前端是 0基础，对html、xml、js等也没有学习过，这篇文章主要是自己的学习记录，来源于菜鸟教程。
正文
- React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
- React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
- 以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。
- 添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。
这一点非常重要，这个state是组件的状态，自带的属性，不需要声明。我一开始理解上边话的时候就没有深刻理解。
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 中被称为卸载。
我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：
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() 钩子中卸载定时器。
注：这个timerID也是自带的，我们不需要声明，一定不要和Java，C/C++等语言搞混。
生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
代码执行顺序：
当
<Clock />被传递给ReactDOM.render()时，React 调用Clock组件的构造函数。 由于Clock需要显示当前时间，所以使用包含当前时间的对象来初始化this.state。 我们稍后会更新此状态。React 然后调用
Clock组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配Clock的渲染输出。当
Clock的输出插入到 DOM 中时，React 调用componentDidMount()生命周期钩子。 在其中，Clock组件要求浏览器设置一个定时器，每秒钟调用一次tick()。浏览器每秒钟调用
tick()方法。 在其中，Clock组件通过使用包含当前时间的对象调用setState()来调度UI更新。 通过调用setState()，React 知道状态已经改变，并再次调用render()方法来确定屏幕上应当显示什么。 这一次，render()方法中的this.state.date将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。一旦
Clock组件被从 DOM 中移除，React 会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。