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

前端之家收集整理的这篇文章主要介绍了从零开始学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个特殊的事件。

  1. 组件加载好了,但是收到了新的参数时触发componentWillReceiveProps(object nextProps):
  2. 组件重新渲染时触发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中第一个大括号替换了""写法,第二层大括号是一个对象。所以,这里要使用双层大括号。

原文链接:https://www.f2er.com/react/306715.html

猜你在找的React相关文章