从零开始学React(10)——组件的生命周期

在React中，组件从创建，插入，渲染，移除真实组件整个过程中，我们可以根据组件所处的状态。触发特定的事件。官方参考文档

组件的生命周期严格来说分为3个状态，

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

每种状态都有2个事件可以触发，will进入该状态之前调用，did进入状态之后调用。

然后，结合起来分为5种状态，移出真实DOM以后就不会触发状态类事件了。所以共有5种事件。

componentwillMount() //插入真实DOM之前触发
componentDidMount() //插入真实DOM后触发
componentwillUpdate(object nextProps,object nextState) //被渲染之前触发
componentDidUpdate(object prevProps,object prevstate) //被渲染时触发
componentwillUnmount() //移出真实DOM前触发

除此以外还有2个特殊的事件。

组件加载好了，但是收到了新的参数时触发componentwillReceiveProps(object nextProps)：
组件重新渲染时触发shouldComponentUpdate(object nextProps,object nextState);

完整代码

<!DOCTYPE html>
<html>
<Meta charset="UTF-8">
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="diy"></div>
<!--在JXS中，最好不要写注释容易报错-->
<!--input标签的/一定要写，否则报错-->

<script type="text/babel">
//setInterval()里面一定要使用bind，只用setInterval会报错。
//使用bind后，this代表的是本函数。不使用bind时，this代表window
	var MyColor = React.createClass({
		getinitialState : function(){
			return {opacity : 1.0}
		},componentDidMount : function (){
			console.log("componentDidMount"+this);
			this.timer = setInterval(function(){
			
			console.log("setInterval"+this);
				var opacity = this.state.opacity;
				opacity -= 0.05;
				if(opacity < 0.1){
					opacity = 1.0;
				}
				this.setState({opacity : opacity});
			}.bind(this),100)
		},render : function(){
			return(
				<div style={{opacity : this.state.opacity}}>
					你好,{this.props.name}
				</div>
			)
		}
	})
	
	ReactDOM.render(<MyColor name="这段话会循环的显示隐藏"/>,document.getElementById("diy"));
</script>
</body>
</html>

在上面，setInterval()是定时执行函数。正常用法为setInterval(fn(),time).opacity属性是透明度属性。通过每秒透明度减小1/20，达到逐渐透明的目的。

bind和setInterval的区别

但是在这里不能这么用。bind()该函数改变了this的含义。

使用bind()时，浏览器打印的this为object object。

当不使用bind().只调用setInterval函数时，浏览器打印的this为object window；

style注意点

style官方文档

另外，组件的style属性的设置方式也值得注意，不能写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

React中第一个大括号替换了""写法，第二层大括号是一个对象。所以，这里要使用双层大括号。

从零开始学React(10)——组件的生命周期

相关文章