Skip to content

Commit 994a0c8

Browse files
dhyey35Kevin Lacker
dhyey35
authored and
Kevin Lacker
committed
update react perf docs (#8060) and (#6174) (#8236)
* update react perf docs issue 8060 and 6174 * Grammar Small stuff
1 parent e280f5a commit 994a0c8

File tree

3 files changed

+252
-0
lines changed

3 files changed

+252
-0
lines changed

‎docs/docs/addons-perf.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ next: test-utils.html
1414
import Perf from 'react-addons-perf' // ES6
1515
var Perf = require('react-addons-perf') // ES5 with npm
1616
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;
1722
```
1823

1924

@@ -57,6 +62,34 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
5762

5863
* * *
5964

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+
![](/react/img/docs/addons-perf.png)
91+
92+
* * *
6093
## Reference
6194

6295
### `start()`
@@ -145,3 +178,4 @@ Perf.printDOM(measurements)
145178
```
146179

147180
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

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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/[email protected]/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

62.3 KB
Loading

0 commit comments

Comments
 (0)