一、
二、调优例子
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 "100px", 24 float: "left", 25 margin: "10px", 26 backgroundColor: "gray", 27 } 28 var chosedStyle = { 29 height: "100px", 30 "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 "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>
三、运行结果
