Skip to content

Commit 8fc9125

Browse files
committed
update react perf docs issue 8060 and 6174
1 parent ccf6f59 commit 8fc9125

File tree

2 files changed

+32
-1
lines changed

2 files changed

+32
-1
lines changed

docs/docs/addons-perf.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ 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+
//If Perf is not accessible from console i.e throws RefrenceError:
19+
//Perf is not defined, create a global
20+
window.Perf = Perf;
1721
```
1822

1923

@@ -32,7 +36,7 @@ See these articles by the [Benchling Engineering Team](http://benchling.engineer
3236

3337
If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the [minified production build](/react/downloads.html). The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
3438

35-
However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
39+
However, the perf tools described on this page only work when using the development build of React. If you set NODE_ENV to _production_ than it will not work. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
3640

3741
### Using Perf
3842

@@ -56,6 +60,33 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
5660

5761
* * *
5862

63+
## Example Usage:
64+
65+
We will take the comments example from old official tutorial. The example code is availabe on [github](https://github.com/dhyey35/react-example-for-performance/blob/master/public/scripts/example.js).
66+
67+
```javascript
68+
//Using react-with-addons.js in ES5
69+
var Perf = React.addons.Perf;
70+
71+
var Comment = React.createClass({
72+
rawMarkup: function() {
73+
var md = new Remarkable();
74+
var rawMarkup = md.render(this.props.children.toString());
75+
return { __html: rawMarkup };
76+
},
77+
//code...
78+
79+
ReactDOM.render(
80+
<CommentBox url='/api/comments' pollInterval={2000} />,
81+
document.getElementById('content')
82+
);
83+
```
84+
Open the developer console in the browser and type `Perf.start()` than followed by the action you want to monitor eg: submitting a form. Than type `Perf.stop()` in the console and than type `Perf.getLastMeasurements()` to get the measurements .See the Reference below for more methods.
85+
86+
![](/react/img/docs/addons-perf.png)
87+
88+
A **Live Example** of the above code is available on [react-example-for-performance](https://react-example-for-performance.herokuapp.com/)
89+
* * *
5990
## Reference
6091
6192
### `start()`

docs/img/docs/react-perf.png

62.3 KB
Loading

0 commit comments

Comments
 (0)