React中的性能優化

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函數的運行