react-lifecycle.png
start -> getDefaultprops -> getInitialState
componentWillMount :当组件即将渲染的时候触发的函数
componentDidMount：当组件渲染完成触发的一个函数
componentWillUpdate：当组件发生改变的时候触发
componentDidUpdate：当组件发生改变的时候触发
componentWillUnmount：组件被卸载的时候触发
componentWillReceiveProps：props改变之前
shouldComponentUpdate：props改变之后
var HelloReact = React.createClass({
getDefaultprops:function(){
console.log("getDefaultprops");
},
// getInitialState:function(){
// console.log("getInitialState");
// },
componentWillMount:function(){
console.log("componentWillMount");
},
componentDidMount:function(){
console.log("componentDidMount");
},
render:function(){
return(
<div>我是Hello React</div>
)
}
})
ReactDOM.render(<HelloReact />,document.getElementById("root"));
例子；使背景颜色的透明度慢慢变化
// css
<style>
.div{
width:100px;
height: 100px;
background-color: red;
}
</style>
1.state:状态 当组件自身改变的内容，可以使用state处理
1.this.state :获取
2.this.setState :设置
2.当state改变的时候，会触发render重新渲染
区分：props外部组件传递的一些值；state组件内部改变触发的状态
//js and HTML
<body>
<div id="root"></div>
<script type="text/babel">
var ComState = React.createClass({
//初始化state
getInitialState:function(){
return{
opacity:1.0
}
},
componentDidMount:function(){
var timer = setInterval(function(){
var opacitys = this.state.opacity;
opacitys-=0.02;
this.setState({
opacity:opacitys
})
}.bind(this),100) //在间隔调用里this指向window，所以要改变this指向
}, //call-对象；apply-数组；bind
componentWillUpdate:function(){
console.log("componentWillUpdate");
},
componentDidUpdate:function(){
console.log("componentDidUpdate");
},
render:function () {
return(
<div className="div" style={{opacity:this.state.opacity}}>{this.props.title}</div>
)
}
})
ReactDOM.render(<ComState title="nihaome" />,document.getElementById("root"));
</script>
</body>
网友评论