关于react性能优化的一点理解

有这样一个场景，有无穷多个dom,可以修改数字，数字对应哪一个dom，则哪一个dom颜色就变红，UI如下

image.png

如果不做任何优化，在dom很少的时候，可能感觉不到性能的缺失，但是当dom有100，1000时，就会很明显的感受到dom并不是立即改变的，有一个卡的过程，这主要是由于做了大量的重复渲染造成的，怎么来解决这个问题呢，我做的优化主要是用到了shouldComponentUpdate
看看灰色框组件的代码

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Test extends Component {
  render() {
    const { selectedIndex, index,text } = this.props
    return (
      <div style={{background: selectedIndex == index ? '#f00' : '#333',width:'100px',height:'100px',margin:'10px'}}>
        {text}
      </div>
    )
  }
}

Test.propTypes = {
  selectedIndex: PropTypes.number,
  index: PropTypes.number
}

Test.defaultProps = {
  selectedIndex: -1,
  index: 0
}

再看看容器组件的代码

import React, { Component } from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Test from '../../components/Test'
import styles from './main.scss'
// @pureRender
class Perfermance extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
        selectedIndex: -1
      }
    }
  shouldComponentUpdate(nextProps,nextState){
    return !Number.isNaN(nextState.selectedIndex)
  }
  handleInput = (e) => {
    this.setState({
        selectedIndex: parseInt(e.target.value)
    })
  }

  renderList() {
    var lists=[]
    for(let i = 0; i <1000; i++){
        lists.push(<Test selectedIndex={this.state.selectedIndex} index={i} key={i} text={i} render={this.state.selectedIndex == i} />)
    }
    return lists
  }

  render() {
    const { colors, texts } = this.state
    return (
      <div>
        <input type="number" onInput={this.handleInput} />
        <div className={styles.list}>
            { this.renderList() }
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => state

export default connect(mapStateToProps, null)(Perfermance)

先打断一下，其实react组件重绘，只有在state改变或者props改变时才会发生，我们可以在shouldComponentUpdate中做判断是否重绘我们的组件，在container组件中，我们已经做处理了，如果selectedIndex不是数字时，是禁止重绘的，我们来看看加不加这一段的区别

image.png

我分别输入了0，1，5，从打印的结果来看，多做了两次渲染，这两次渲染是因为每次清除数字时导致的，此时selectedIndex就为NaN了，这造成了浪费，接下来，我们做同样的操作，但是加上shouldComponentUpdate的逻辑

image.png

此时就没有浪费了

---

以上讲的是容器组件，我们还没有对灰色组件做优化，现在我们来看做优化和不做优化的区别
不做优化改一个数字

image.png

这很明显，造成了999次重复渲染,当加上这段之后，就没有再重复渲染的情况了

    shouldComponentUpdate(nextProps){
        return nextProps.render
    }

其中的render就是判断selectedIndex和index是否一致，逻辑简单，不展开了