<
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react.js</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
var Timer = React.createClass({displayName: "Timer",
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 (
React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)
);
}
});
ReactDOM.render(React.createElement(Timer, null),
document.getElementById('container'));
</script>
</body>
</html>
基本是这意思。componentWillMount
用的较少,因为它必须得是同步的;componentDidMount
用的较多,基本上调ajax,改DOM的事情都放这里