React如何性能调优

一、

二、调优例子

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>React性能调优</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/build/react-with-addons.js"></script>
 9     <script src="./react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var NumberDiv = React.createClass({
12             getInitialState: function () {
13                 return {
14                     number: this.props.number,
15                 }
16             },
17             shouldComponentUpdate: function (nextProps) {
18                 return nextProps.render
19             },
20             render: function () {
21                 var style = {
22                     height: "100px",
23                     width: "100px",
24                     float: "left",
25                     margin: "10px",
26                     backgroundColor: "gray",
27                 }
28                 var chosedStyle = {
29                     height: "100px",
30                     width: "100px",
31                     float: "left",
32                     margin: "10px",
33                     backgroundColor: "red",
34                 }
35                 return <div style={this.props.chosedNumber === this.state.number ? chosedStyle : style}>
36                     {this.state.number}
37                 </div>
38             }
39         })
40         var ChooseNumber = React.createClass({ 
41             getInitialState: function () {
42                 return {
43                     inputNumber: -1,
44                     lastNumber: -1
45                 }
46             },
47             handleChange: function (e) {
48                 if (parseInt(e.target.value) !== this.state.inputNumber) {
49                     this.setState({
50                         inputNumber: parseInt(e.target.value),
51                         lastNumber: this.state.inputNumber
52                     })
53                 }  
54             },
55             render: function () {
56                 var inputStyle = {
57                     display: "block",
58                     clear: "both",
59                     width: "200px",
60                     marginBottom: "10px",
61                 }
62                 var children = []
63                 for (var i = 0; i < 5000; i++) {
64                     children.push(<NumberDiv key={i} render={i == this.state.inputNumber || i == this.state.lastNumber} chosedNumber={this.state.inputNumber} number={i}></NumberDiv>) 
65                 }
66                 return <div> 
67                     <input type="text" style={inputStyle} placeholder="请输入一个数字" onChange={this.handleChange} />
68                     {children}
69                 </div>;
70             } 
71         });
72         React.render(<ChooseNumber></ChooseNumber>, document.body);
73     </script>
74 </body>
75 </html>

三、运行结果

 

posted @ 2015-12-20 18:29  shamgod  阅读(301)  评论(0)  编辑  收藏  举报
haha