React.js 时间组件 + 组件生命周期（更新模拟）

1React是用于构建用户界面的 JavaScript 库，React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。
2React除了可以使用外部传入的数据以外 (通过 this.props 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 this.state 访问状态数据)。 当组件的状态数据改变时， 组件会调用 render() 方法重新渲染。效果图如下，基本没写样式，不是很美观！

1实例模拟：
2<style>
3#app{
4　　width:80%;
5　　margin:0 auto;
6　　text-align:center;
7　　font-size:50px;
8　　font-weight:bold;
9　　color:black;
10}
11</style>
12<script type="text/babel">
13	class Comp extends React.Component{
14		//构造函数 构造函数是在整个类中未初始化中执行的
15		constructor(...args){  //构造函数名
16		super(...args);//超类。
17		this.state={h:'0',m:'0',s:'0'};
18		var that=this;
19		 setInterval(function(){
20			that.fn()
21		},1000)
22	}
23	componentDidMount(){
24	　　this.fn();
25	}
26	componentWillUpdate(){
27　　　　　　console.log("更新之前");
28	}
29	componentDidUpdate(){
30　　　　　　console.log("更新之后");
31	}
32	fn(){
33	//传json
34		var D=new Date();
35		this.setState({h:D.getHours(),m:D.getMinutes(),s:D.getSeconds()})
36	}
37	render(){
38	　　return <div>
39　　　　　　　　　　　　<span>{this.state.h}:</span>
40		　　 <span>{this.state.m}:</span>
41		    <span>{this.state.s}</span>
42		   </div>;
43	}
44   }
45   window.onload=function(){
46        var time=document.getElementById('app');
47	ReactDOM.render(<Comp/>,time);
48   }	    
49</script>  <div id="app"></div>