mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Dan Abramov
@@ -14,11 +14,6 @@ next: test-utils.html
|
||||
import Perf from 'react-addons-perf' // ES6
|
||||
var Perf = require('react-addons-perf') // ES5 with npm
|
||||
var Perf = React.addons.Perf; // ES5 with react-with-addons.js
|
||||
|
||||
// Usually importing Perf in ES6 with a module bundler
|
||||
// doesn't make Perf available as global and throws a
|
||||
// ReferenceError so create a global
|
||||
window.Perf = Perf;
|
||||
```
|
||||
|
||||
|
||||
@@ -62,34 +57,6 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
|
||||
|
||||
* * *
|
||||
|
||||
## Example Usage
|
||||
|
||||
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).
|
||||
|
||||
```javascript
|
||||
import { Component } from 'react'
|
||||
import Perf from 'react-addons-perf'
|
||||
|
||||
const Comment = (props) => (
|
||||
<div className="comment">
|
||||
<h2 className="commentAuthor">
|
||||
{props.author}
|
||||
</h2>
|
||||
<span>{props.children.toString()}</span>
|
||||
</div>
|
||||
)
|
||||
//code...
|
||||
|
||||
ReactDOM.render(
|
||||
<CommentBox />,
|
||||
document.getElementById('content')
|
||||
);
|
||||
```
|
||||
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.
|
||||
|
||||
|
||||
|
||||
* * *
|
||||
## Reference
|
||||
|
||||
### `start()`
|
||||
@@ -178,4 +145,3 @@ Perf.printDOM(measurements)
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -1,218 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>React Perf Tutorial</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: bold;
|
||||
margin: 0 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://unpkg.com/react@latest/dist/react-with-addons.js"></script>
|
||||
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
|
||||
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
Fire up your console <code>( Ctrl + Shift + i )</code> and type <code>Perf.start()</code>
|
||||
then post a comment below and type <code>Perf.stop()</code> followed by <code>Perf.printWasted()</code>.
|
||||
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>.
|
||||
</div>
|
||||
<div id="content"></div>
|
||||
<script type="text/babel">
|
||||
var Component = React.Component;
|
||||
window.Perf = React.addons.Perf;
|
||||
|
||||
const Comment = (props) => (
|
||||
<div className="comment">
|
||||
<h2 className="commentAuthor">
|
||||
{props.author}
|
||||
</h2>
|
||||
<span>{props.children.toString()}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
class CommentBox extends Component {
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.state = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadComments()
|
||||
}
|
||||
|
||||
loadComments() {
|
||||
let initialComments = [
|
||||
{
|
||||
author: "Dan Abramov",
|
||||
id: 0,
|
||||
text: "React is awesome"
|
||||
},
|
||||
{
|
||||
author: "Kevin Lacker",
|
||||
id: 1,
|
||||
text: "I Love React"
|
||||
},
|
||||
{
|
||||
author: "Dhyey Thakore",
|
||||
id: 2,
|
||||
text: "Welcome to React Performance Example"
|
||||
}
|
||||
]
|
||||
this.setState({data: initialComments})
|
||||
}
|
||||
|
||||
handleCommentSubmit(comment) {
|
||||
let comments = this.state.data
|
||||
|
||||
comment.id = Date.now()
|
||||
comments.unshift(comment)
|
||||
this.setState({data: comments})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="commentBox">
|
||||
<h1>Comments</h1>
|
||||
<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)} />
|
||||
<CommentList data={this.state.data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class CommentList extends Component {
|
||||
render() {
|
||||
let commentNodes = this.props.data.map(comment => (
|
||||
<Comment author={comment.author} key={comment.id}>
|
||||
{comment.text}
|
||||
</Comment>
|
||||
)
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="commentList">
|
||||
{commentNodes}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class CommentForm extends Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = {
|
||||
author: '',
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
|
||||
handleAuthorChange(e) {
|
||||
this.setState({author: e.target.value})
|
||||
}
|
||||
|
||||
handleTextChange(e) {
|
||||
this.setState({text: e.target.value})
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
let author = this.state.author.trim()
|
||||
let text = this.state.text.trim()
|
||||
if (!text || !author) {
|
||||
return
|
||||
}
|
||||
this.props.onCommentSubmit({author: author, text: text})
|
||||
this.setState({author: '', text: ''})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
value={this.state.author}
|
||||
onChange={this.handleAuthorChange.bind(this)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Say something..."
|
||||
value={this.state.text}
|
||||
onChange={this.handleTextChange.bind(this)}
|
||||
/>
|
||||
<input type="submit" value="Post" />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
<CommentBox />,
|
||||
document.getElementById('content')
|
||||
)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Reference in New Issue
Block a user