update react perf docs (#8060) and (#6174) (#8236)

* update react perf docs issue 8060 and 6174 * Grammar Small stuff
8 years ago · e701f41a66
3 changed files with 252 additions and 0 deletions
--- a/docs/addons-perf.md
+++ b/docs/addons-perf.md
@ -14,6 +14,11 @@ 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;
 ```


@ -57,6 +62,34 @@ 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.
+
+![](/react/img/docs/addons-perf.png)
+
+* * *
 ## Reference

 ### `start()`
@ -145,3 +178,4 @@ 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.
+	
--- a/downloads/perf-tutorial.html
+++ b/downloads/perf-tutorial.html
@ -0,0 +1,218 @@
+<!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>
--- a/img/docs/react-perf.png
+++ b/img/docs/react-perf.png