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):组件判断是否重新渲染时调用