You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
5.4 KiB
218 lines
5.4 KiB
<!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>
|
|
|