React使用笔记2-React Components的生命周期

Date: 2015-11-27 21:23
Category: Web
Tags: JavaScript
Author: 刘理想

1. React Components的生命周期

React Components的3种状态:

  • Mounted:React Component被render解析,生成对应的DOM节点,并被插入浏览器的DOM结构的过程。这个过程结束了就是这个组件被Mounted了。
  • Update:一个被mounted的React Component被重新render的过程。
  • Unmounted:一个被mounted的React Component对应的DOM节点被从DOM结构中移除的这样一个过程。

每一个状态React都封装了对应的hook函数。


2. React Components生命周期中的hook函数

2.1 实验,来添加mount的hook函数

我们使用getInitialState, componentWillMount, componentDidMount来添加React Component在Mount阶段的hook函数,其中getIntialState返回一个键值对对象。

<div id="container"></div>
<script type="text/jsx">
    var Hello = React.createClass({
        getInitialState: function(){
            alert("getInitialState");
            return {
                opacity: 1.0,
                fontSize: '20px'
            }
        },
        render: function(){
            return <div style={{color:'red'}}>Hello, {this.props.name}</div>;
        },
        componentWillMount: function(){
            alert("component will mount");
        },
        componentDidMount: function(){
            alert("component did");
        }
    });

    React.render(<Hello name="world"/>,
        document.getElementById("container"));
</script>

getIntialState返回的对象如何使用呢,使用{this.state}就可以了:

render: function(){
    return <div style={this.state}>Hello, {this.props.name}</div>;
}

这里state中都是合法有效的键值,如果不是的话需要这样用:

render: function(){
    return <div style={{opacity:this.state.opacity, fontSize: this.state.fontSize}}>Hello, {this.props.name}</div>;
}

propsstate的区别是什么呢?props是属于调用者的,而state是属于当前组件的。


2.2 如何修改state呢?

我们调用setState,比如我们在组件mount后一秒更改state,我们这样:

componentDidMount: function(){
    var _self = this;
    window.setTimeout(function(){
        _self.setState({
            opacity: 0.5,
            fontSize: '44px'
        });
    }, 1000);
}

这里对var _self = this进行说明:

this指的是调用函数的那个对象,也就是函数的所有者,而setTimeout中的function并不属于任何对象,它只是一个纯粹的函数调用,所以属于全局对象,这种情况下,thisglobal,因此我们为了调用组件对象,需要使用var _self = this的这种方法。

既然说到了this,我们不妨多讲一些this的使用情况,比如:

我们把函数当做构造函数来使用,这种情况下,this就是指构造函数生成的对象:

function test(){
    this.x = 1;
}

var o = new test();

还有一种则是调用函数的apply, call, bind等方法,其作用是改变函数的调用对象,它们的第一个参数就是改变后的调用这个函数的对象,因此这种情况下,this指的就是第一个参数所代表的对象。因此,刚才的例子可以这样写,让function里面的this指向function外面的this

componentDidMount: function(){
    window.setTimeout(function(){
        this.setState({
            opacity: 0.5,
            fontSize: '44px'
        });
    }.bind(this), 1000);
}

注意,bind是从ES5才开始有的,早期的IE不支持。

通过现象看本质,我们发现,每次组件的state发生变化都会导致组件进入update阶段,从而重新render。注意,我们并没有显式的修改组件的样式,而是state的值变了之后,样式就跟着改变了。


2.3 Update阶段

我们看开始的图,可以看到:

  • componentWillReceiveProps:当一个mounted的组件将要接收新的property时,此函数会被调用,其函数参数就是新的props对象。我们可以在函数体内比较这个props参数和this.props,从而执行一些例如修改state这样的操作。
  • shouldComponentUpdate: 在一个mounted的组件已经接收到新的stateprops对象之后,判断是否有必要去更新DOM结构。这个函数的参数有2个,一个就是新的props对象,第二个参数是新的state对象。我们可以分别对比其跟this.propsthis.state来决定是否需要更新DOM结构。返回true表示更新,返回false表示不更新。
  • componentWillUpdate: 组件更新前调用。
  • compoentDidUpdate: 组件更新后调用。

一般我们很少会更新上面的4个函数


2.4 Unmounting阶段

当我们要把一个组件销毁掉的时候,则是unmounting阶段了,它只有一个调用函数:

componentWillUnmount:我们在这个函数内执行一些clean up的操作,比如释放内存、图片等。得益于浏览器的垃圾回收机制,我们基本不需要使用这个函数。

作者:liulixiang1988#gmail.com (#换成@)
参考链接:http://www.imooc.com/learn/504

posted @ 2015-11-28 12:13  刘理想  阅读(903)  评论(0编辑  收藏  举报