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

前端之家收集整理的这篇文章主要介绍了从零开始学React(10)——组件的生命周期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM
  • @H_502_17@

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

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

    • componentWillMount() //插入真实DOM之前触发
    • componentDidMount() //插入真实DOM后触发
    • componentWillUpdate(object nextProps,object nextState) //被渲染之前触发
    • componentDidUpdate(object prevProps,object prevState) //被渲染时触发
    • componentWillUnmount() //移出真实DOM前触发
    • @H_502_17@

      除此以外还有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中第一个大括号替换了""写法,第二层大括号是一个对象。所以,这里要使用双层大括号。

猜你在找的React相关文章