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