react组件周期
<!-- react的核心组件第一个加载 -->
<script src="js/react.min.js"></script>
<!-- react-dom ReactDOM对DOM节点的一点操作 -->
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
/*
state 状态的意思，一般在页面中存在状态的变化以及涉及到与状态相关
的东西的时候都会用到它
作用：根据不同的状态显示不同的UI界面
*/
var Demo = React.createClass({
//第一步执行顺序 只执行一次
//设置默认的属性
getDefaultProps: function(){
return{
name:"现在的时间是："
}
},
//第二步执行顺序
//设置初始状态
getInitialState: function(){
return {
sss:'box1'
}
},
//第三步执行组件将要加载的时候，最后一次可以修改状态的机会
componentWillMount:function(){
this.setState({
sss:'修改状态'
})
},
// 第四步：render渲染
render:function(){
console.log(this)
var styles={
color:'red',
border:'1px solid red',
width:'100px',
height:'100px',
lineHeight:'100px',
textAlign:'center'
}
return (<div ref='jing' style={styles}>{this.state.sss}{this.props.name}</div>)
},
//第五步：组件加载完成 这里可以修改DOM节点
componentDidMount:function(){
console.log("姚辉乾")
var jing = this.refs.jing
var n = 0
jing.style.width= '250px'
jing.style.background= 'yellow'
jing.οnclick=()=>{
var that = this
setInterval(() => {
n++
jing.style.marginLeft = n +'px';
}, 20);
}
}
})
ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>
