一、
二、调优例子
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>
三、运行结果
时间： 2024-10-12 13:44:14