標籤：
<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)：組件判斷是否重新渲染時調用
React(0.13) 利用componentDidMount 方法設定一個定時器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
