React(0.13) 利用componentDidMount 方法设置一个定时器

<html>
    <head>
        <title>hello world React.js</title>
        <script src="build_0.13/react.min.js"></script>
        <script src="build_0.13/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="e"></div>
        <script type="text/jsx">
            var Hello = React.createClass({
                    getInitialState:function(){
                        return {opacity:1.0};
                    },
                    componentDidMount:function(){
                        this.timer = setInterval(function(){
                            var opacity = this.state.opacity;
                            opacity -= 0.1;
                            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>
                        );
                    }
                });
            
            //添加组件到e中
            React.render(
                <Hello name="world" />,
                document.getElementById("e")
            );
        </script>
    </body>
</html>

 

 

组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM

  • Updating:正在被重新渲染

  • Unmounting:已移出真实 DOM

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

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

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

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

posted @ 2016-03-27 14:18  天道酬勤,坚持!  阅读(6111)  评论(0编辑  收藏  举报