React中的性能优化

Posted 2021-03-07 nayek

1. 作用域的修改放在constructor中

  constructor (props) {
    super(props)
    // 当组件的state或者props发生改变的的时候，render函数就是重新执行
    this.state = {
      inputValue: '',
      list: []
    }
    // 将this指向放在constructor中执行，在复杂的组件开发中节约性能
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnChange = this.handleBtnChange.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

2. setState异步函数

setState内置了性能优化的机制,它是一个异步函数,可以把多次的数据改变结合成一次来做,这样的话降低虚拟DOM的对比频率，来提高性能

3.虚拟DOM

React底层运用了虚拟DOM，他还有同层比对，key值的调用，来提升虚拟DOM的比对速度，从而提升React的性能

4.借助shouldComponentUpdate生命周期函数

避免无谓的组件的render函数的运行