react性能的一些总结

有这么个组件，循环了一个子组件10000次

 state = {
    currentIndex: 0
  }
  handleClick = (index) => {
      const { text, helloWorldActons } = this.props
      this.setState({
        currentIndex: index
      }, () => {
        helloWorldActons.changeText(Math.random(), index)
      })
  }
   renderList(handle, text) {
    var lists=[]
    for(let i = 0; i <10000; i++){
        lists.push( <PerformanceDemo onClick={() => {this.handleClick(i)} } text={text} key={i} currentIndex={this.state.currentIndex} index={i}  />)
    }
    return lists
  }
  render() {
    const { text, helloWorldActons } = this.props
    return (
      <div>
        Home
        <p>
            <Link to='./about'>about</Link>
        </p>
        { this.renderList(helloWorldActons.changeText, text) }
      </div>
    )
  }

如果不在组件中做优化时，每次都去渲染每一个组件，那么，在开发模式下，性能如下

image.png

1.开发模式下不做任何优化，js脚本很耗性能
接下来，我们在开发模式下，优化下性能，只渲染当前点击的组件

image.png
2.开发模式下，做了优化之后，脚本执行时间大大减少，render时间要大大减少
接下来，我们在生产模式下，看看不优化的结果
image.png
3.生产模式下，不做优化，影响了render的性能
再来看看，生产模式做了优化的结果
image.png
4.生产模式优化之后，各种指标全部上升
这里插播一句，一般我们做优化都是在shouldComponentUpdate中判断，这个时候，尽管我们的条件已经达到了优化的结果，但是，假如，在这个方法执行很多次，并且在里面打印一条console.log时，也很耗时间，切记
接下来，我们来手动做操作，看看结果如何

  var text = '测试'

  function createDom2(text) {
    var html = '<div>'
    html += '<button> change text</button>'
    html += '<div>' + text + '</div>'
    html += '</div>'
    return html
  }

  function render() {
    var html = ''
    for (var i = 0; i < 10000; i++) {
      html += createDom2(text)
    }
    document.body.innerHTML = html
  }
  render()

  document.body.addEventListener('click', function() {
    text = Math.random()
    render()
  })

image.png

由这个分析结果，其实不好给结论，假如按照本demo中的比较来看，这个是高于react开发模式的性能的，但是跟生产模式来看，性能还是欠缺，所以，虚拟dom对性能的处理还是比较不错的