<commit_before>---
title: react入门 （3）-组件的生命周期
---

#### 组件的生命周期
>组件的生命周期分成三个状态：

{% highlight javascript %}
Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting:已移出真实DOM
{% endhighlight %}

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用， did 函数在进入状态之后调用，三种状态共计五种处理函数。

{% highlight javascript %}
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidupdate(object nextProps,object nextState)
componentWillUnmount()
{% endhighlight %}

此外 React 还提供两种特殊状态的处理函数。

{% highlight javascript %}
componentWillReceiveProps(object nextProps) //已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)//组件判断是否重新渲染时调用
{% endhighlight %}



<commit_msg>react 3<commit_after>---
title: react入门 （3）-组件的生命周期
---

#### 组件的生命周期
>组件的生命周期分成三个状态：

{% highlight javascript %}
Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting:已移出真实DOM
{% endhighlight %}

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用， did 函数在进入状态之后调用，三种状态共计五种处理函数。

{% highlight javascript %}
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidupdate(object nextProps,object nextState)
componentWillUnmount()
{% endhighlight %}

此外 React 还提供两种特殊状态的处理函数。

{% highlight javascript %}
componentWillReceiveProps(object nextProps) //已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)//组件判断是否重新渲染时调用
{% endhighlight %}

下面是一个例子

{% highlight javascript %}
var Hello=React.createClass({
            getInitialState:function () {
                return {opacity:1.0}
            },
            componentDidMount:function () {
                this.timer=setInterval(function () {
                    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}}>
                          hello {this.props.name}
                        </div>
                )
            }
        });
        ReactDOM.render(
                <Hello name="world"/>,
            document.getElementById('example')
        );
{% endhighlight %}

上面代码在 Hello 组件家在以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒。就重新设置组件透明度，从而引发重新渲染。

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

{% highlight javascript %}
style={{opacity:this.state.opacity}}
{% endhighlight %}

这是因为React 组件样式是一个对象，所以第一重大括号表示这是JavaScript 语法，第二重大括号表示样式对象。


{'fraction_non_alphanumeric': 0.10744763382467029, 'fraction_numerical': 0.0069821567106283944, 'mean_word_length': 2.9434250764525993, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 8, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '350233', 'n_tokens_mistral': 1051, 'n_tokens_neox': 1074, 'n_words': 134}