React如何性能调优

一、

二、调优例子

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>React性能调优</title>
 </head>
 <body>
     <script src="./react-0.13.2/build/react-with-addons.js"></script>
     <script src="./react-0.13.2/build/JSXTransformer.js"></script>
     <script type="text/jsx">
         var NumberDiv = React.createClass({
             getInitialState: function () {
                 return {
                     number: this.props.number,
                 }
             },
             shouldComponentUpdate: function (nextProps) {
                 return nextProps.render
             },
             render: function () {
                 var style = {
                     height: "100px",
                     width: "100px",
                     float: "left",
                     margin: "10px",
                     backgroundColor: "gray",
                 }
                 var chosedStyle = {
                     height: "100px",
                     width: "100px",
                     float: "left",
                     margin: "10px",
                     backgroundColor: "red",
                 }
                 return <div style={this.props.chosedNumber === this.state.number ? chosedStyle : style}>
                     {this.state.number}
                 </div>
             }
         })
         var ChooseNumber = React.createClass({
             getInitialState: function () {
                 return {
                     inputNumber: -1,
                     lastNumber: -1
                 }
             },
             handleChange: function (e) {
                 if (parseInt(e.target.value) !== this.state.inputNumber) {
                     this.setState({
                         inputNumber: parseInt(e.target.value),
                         lastNumber: this.state.inputNumber
                     })
                 }
             },
             render: function () {
                 var inputStyle = {
                     display: "block",
                     clear: "both",
                     width: "200px",
                     marginBottom: "10px",
                 }
                 var children = []
                 for (var i = 0; i < 5000; i++) {
                     children.push(<NumberDiv key={i} render={i == this.state.inputNumber || i == this.state.lastNumber} chosedNumber={this.state.inputNumber} number={i}></NumberDiv>)
                 }
                 return <div>
                     <input type="text" style={inputStyle} placeholder="请输入一个数字" onChange={this.handleChange} />
                     {children}
                 </div>;
             }
         });
         React.render(<ChooseNumber></ChooseNumber>, document.body);
     </script>
 </body>
 </html>

三、运行结果