-
Notifications
You must be signed in to change notification settings - Fork 0
/
04-stateful-component-even-render.html
45 lines (41 loc) · 1.34 KB
/
04-stateful-component-even-render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Workshop</title>
<link href="https://rawgit.com/kouphax/static/master/react-workshop/stylesheets/styles.css" rel="stylesheet">
</head>
<body>
<!-- NOT REQUIRED FOR REACT BUT MAY BE HANDY LATER -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- REACT CORE LIBRARY (DEVELOPMENT VERSION) -->
<script src="http://fb.me/react-0.11.1.js"></script>
<!-- ONLY NEEDED FOR JSX FOR DEVELOPMENT AND PROTOTYPING -->
<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<div id="container"></div>
<script>
var StatefulComponent = React.createClass({
getInitialState: function(){
return { counter: 0 };
},
increment: function() {
this.setState({ counter: this.state.counter + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.increment, 1000);
},
componentWillUmnount: function(){
clearInterval(this.interval);
},
shouldComponentUpdate: function(newProps, newState){
return newState.counter % 2 == 0;
},
render: function() {
return React.DOM.h1(null, this.state.counter);
}
})
React.renderComponent(StatefulComponent(),
document.getElementById('container'));
</script>
</body>
</html>