react 組件的生命週期

標籤：

componentWillMount:組件出現前，dom還沒有渲染到html文檔裡面；

componentDidMount:件渲染完成 已經出現在dom文檔裡;

componentWillUnmount:說該事件在組件即將被移除dom時會觸發;

 

React 生命週期 demo

首先引入相關的js

<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>

<script type="text/jsx">                var Timer=React.createClass({            getInitialState:function(){                return {secondsElapsed:0}            },            tick:function(){                this.setState({secondsElapsed:this.state.secondsElapsed+1});            },                        componentDidMount:function(){                this.interval=setInterval(this.tick,1000);            },            componentWillUnmount:function(){                clearInterval(this.interval);            },            render:function(){                return (<div>timer:{this.state.secondsElapsed}</div>)            }        });                React.render(<Timer />,document.body)                </script>

 

react 組件的生命週期