<!doctype html> <html> <head> <meta charset="utf-8"> <title>qqqqq</title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="common/jquery-2.1.4.min.js"></script> <script src="js/browser.min.js"></script> </head> <body> <div id="box">内容</div> </body> <script type="text/babel" > var Aime = React.createClass({ getInitialState: function () { return { time:'test' }; }, componentWillMount: function () { alert("插入真是dom之前"); }, componentDidMount: function () { alert("插入真是dom之后"); _this.setState({time:this.state.time}); //var _this = this; //_this.t = setInterval(function(){ //_this.setState({time:++_this.state.time}); // },1000); }, componentWillUpdate: function () { // alert("重新渲染之前"); }, componentDidUpdate: function () { //alert("重新渲染之后"); }, componentWillUnmount: function () { alert("移除真是dom之前"); clearInterval(this.t); }, componentWillReceiveProps: function () { alert("已加载组件收到新的参数时调用"); }, render:function(){ return ( <div>{this.props.name}:{this.state.time}</div> ) } }) ReactDOM.render( <Aime name="计时器" />, document.getElementById('box') ); </script> </html>
浙公网安备 33010602011771号