Revert "update react perf docs (#8060) and (#6174)" (#8997)
Dan Abramov committed
Feb 13, 2017 at 23:43 UTC
7bdc189147a723a2849564b6b1b283ea80cd8129
3 files changed
-252
docs/docs/addons-perf.md
-34
@@ -14,11 +14,6 @@ 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;
17
```
18
19
@@ -62,34 +57,6 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
57
58
* * *
59
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
-* * *
60
## Reference
61
62
### `start()`
@@ -178,4 +145,3 @@ Perf.printDOM(measurements)
145
```
146
147
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
deleted
-218
@@ -1,218 +0,0 @@
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 a/docs/img/docs/react-perf.png and /dev/null differ