update react perf docs (#8060) and (#6174) (#8236)
* update react perf docs issue 8060 and 6174 * Grammar Small stuff
Dhyey Thakore committed
Feb 8, 2017 at 03:30 UTC
994a0c8b0c5a2104d57bf99edb9c6667bb58a281
3 files changed
+252
docs/docs/addons-perf.md
+34
@@ -14,6 +14,11 @@ next: test-utils.html
14
import Perf from 'react-addons-perf' // ES6
15
var Perf = require('react-addons-perf') // ES5 with npm
16
var Perf = React.addons.Perf; // ES5 with react-with-addons.js
17
+
18
+// Usually importing Perf in ES6 with a module bundler
19
+// doesn't make Perf available as global and throws a
20
+// ReferenceError so create a global
21
+window.Perf = Perf;
22
```
23
24
@@ -57,6 +62,34 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
62
63
* * *
64
65
+## Example Usage
66
+
67
+We will take simple example of a form which can be used to submit comments and then listing all comments. The example code is [available on GitHub](https://github.com/dhyey35/react-example-for-performance/blob/master/public/scripts/example.js).
68
+
69
+```javascript
70
+import { Component } from 'react'
71
+import Perf from 'react-addons-perf'
72
+
73
+const Comment = (props) => (
74
+ <div className="comment">
75
+ <h2 className="commentAuthor">
76
+ {props.author}
77
+ </h2>
78
+ <span>{props.children.toString()}</span>
79
+ </div>
80
+ )
81
+//code...
82
+
83
+ReactDOM.render(
84
+ <CommentBox />,
85
+ document.getElementById('content')
86
+);
87
+```
88
+Open the developer console in the browser and type `Perf.start()`. Then perform the action you want to monitor, like submitting a form. Finally, type `Perf.stop()` and `Perf.getLastMeasurements()` to get the measurements. See the Reference below for more methods.
89
+
90
+
91
+
92
+* * *
93
## Reference
94
95
### `start()`
@@ -145,3 +178,4 @@ Perf.printDOM(measurements)
178
```
179
180
This method has been renamed to [`printOperations()`](#printoperations). Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed.
181
+
docs/downloads/perf-tutorial.html
new
+218
@@ -0,0 +1,218 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>React Perf Tutorial</title>
6
+ <style type="text/css">
7
+ body {
8
+ background: #fff;
9
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10
+ font-size: 15px;
11
+ line-height: 1.7;
12
+ margin: 0;
13
+ padding: 30px;
14
+ }
15
+
16
+ a {
17
+ color: #4183c4;
18
+ text-decoration: none;
19
+ }
20
+
21
+ a:hover {
22
+ text-decoration: underline;
23
+ cursor: pointer;
24
+ }
25
+
26
+ code {
27
+ background-color: #f8f8f8;
28
+ border: 1px solid #ddd;
29
+ border-radius: 3px;
30
+ font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
31
+ font-size: 12px;
32
+ margin: 0 2px;
33
+ padding: 3px 5px;
34
+ }
35
+
36
+ h1, h2, h3, h4 {
37
+ font-weight: bold;
38
+ margin: 0 0 15px;
39
+ padding: 0;
40
+ }
41
+
42
+ h1 {
43
+ border-bottom: 1px solid #ddd;
44
+ font-size: 2.5em;
45
+ }
46
+
47
+ h2 {
48
+ border-bottom: 1px solid #eee;
49
+ font-size: 2em;
50
+ }
51
+
52
+ h3 {
53
+ font-size: 1.5em;
54
+ }
55
+
56
+ h4 {
57
+ font-size: 1.2em;
58
+ }
59
+
60
+ p, ul {
61
+ margin: 15px 0;
62
+ }
63
+
64
+ ul {
65
+ padding-left: 30px;
66
+ }
67
+ </style>
68
+ <script src="https://unpkg.com/react@latest/dist/react-with-addons.js"></script>
69
+ <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
70
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
71
+ </head>
72
+ <body>
73
+ <div>
74
+ Fire up your console <code>( Ctrl + Shift + i )</code> and type <code>Perf.start()</code>
75
+ then post a comment below and type <code>Perf.stop()</code> followed by <code>Perf.printWasted()</code>.
76
+ See <a href="https://facebook.github.io/react/docs/perf.html">documentation</a> for more details. Complete source code of this demo can be found on <a href="https://github.com/dhyey35/react-example-for-performance">github</a>.
77
+ </div>
78
+ <div id="content"></div>
79
+ <script type="text/babel">
80
+ var Component = React.Component;
81
+ window.Perf = React.addons.Perf;
82
+
83
+ const Comment = (props) => (
84
+ <div className="comment">
85
+ <h2 className="commentAuthor">
86
+ {props.author}
87
+ </h2>
88
+ <span>{props.children.toString()}</span>
89
+ </div>
90
+ )
91
+
92
+ class CommentBox extends Component {
93
+
94
+ constructor() {
95
+ super()
96
+ this.state = {
97
+ data: []
98
+ }
99
+ }
100
+
101
+ componentDidMount() {
102
+ this.loadComments()
103
+ }
104
+
105
+ loadComments() {
106
+ let initialComments = [
107
+ {
108
+ author: "Dan Abramov",
109
+ id: 0,
110
+ text: "React is awesome"
111
+ },
112
+ {
113
+ author: "Kevin Lacker",
114
+ id: 1,
115
+ text: "I Love React"
116
+ },
117
+ {
118
+ author: "Dhyey Thakore",
119
+ id: 2,
120
+ text: "Welcome to React Performance Example"
121
+ }
122
+ ]
123
+ this.setState({data: initialComments})
124
+ }
125
+
126
+ handleCommentSubmit(comment) {
127
+ let comments = this.state.data
128
+
129
+ comment.id = Date.now()
130
+ comments.unshift(comment)
131
+ this.setState({data: comments})
132
+ }
133
+
134
+ render() {
135
+ return (
136
+ <div className="commentBox">
137
+ <h1>Comments</h1>
138
+ <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)} />
139
+ <CommentList data={this.state.data} />
140
+ </div>
141
+ )
142
+ }
143
+ }
144
+
145
+ class CommentList extends Component {
146
+ render() {
147
+ let commentNodes = this.props.data.map(comment => (
148
+ <Comment author={comment.author} key={comment.id}>
149
+ {comment.text}
150
+ </Comment>
151
+ )
152
+ )
153
+
154
+ return (
155
+ <div className="commentList">
156
+ {commentNodes}
157
+ </div>
158
+ )
159
+ }
160
+ }
161
+
162
+ class CommentForm extends Component {
163
+ constructor() {
164
+ super()
165
+ this.state = {
166
+ author: '',
167
+ text: ''
168
+ }
169
+ }
170
+
171
+ handleAuthorChange(e) {
172
+ this.setState({author: e.target.value})
173
+ }
174
+
175
+ handleTextChange(e) {
176
+ this.setState({text: e.target.value})
177
+ }
178
+
179
+ handleSubmit(e) {
180
+ e.preventDefault()
181
+ let author = this.state.author.trim()
182
+ let text = this.state.text.trim()
183
+ if (!text || !author) {
184
+ return
185
+ }
186
+ this.props.onCommentSubmit({author: author, text: text})
187
+ this.setState({author: '', text: ''})
188
+ }
189
+
190
+ render() {
191
+ return (
192
+ <form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>
193
+ <input
194
+ type="text"
195
+ placeholder="Your name"
196
+ value={this.state.author}
197
+ onChange={this.handleAuthorChange.bind(this)}
198
+ />
199
+ <input
200
+ type="text"
201
+ placeholder="Say something..."
202
+ value={this.state.text}
203
+ onChange={this.handleTextChange.bind(this)}
204
+ />
205
+ <input type="submit" value="Post" />
206
+ </form>
207
+ )
208
+ }
209
+ }
210
+
211
+
212
+ ReactDOM.render(
213
+ <CommentBox />,
214
+ document.getElementById('content')
215
+ )
216
+ </script>
217
+ </body>
218
+</html>
docs/img/docs/react-perf.png
Binary files /dev/null and b/docs/img/docs/react-perf.png differ