React(0x02)-react性能优化分析

React性能优化分析

1 this作用域修改放到构造函数中

• 整个组件同一个函数this作用的修改只在构造函数中执行一次，提升了性能

constructor(props) {
    super(props)
    this.itemDel = this.itemDel.bind(this)
  }

2 setSate()修改合并

setState(() => {
    return {
        
    }
})

• setState()是异步函数，在短时间内进行的多次修改，setState会将多次修改合并，只执行一次更新，以提升性能

3 虚拟DOM

• 虚拟DOM的比对比真实DOM的比对性能消耗小得多
• 通过对比，只修改DOM中有变化的部分
• Diff算法，逐层对比，有不同则后续不再对比，直接替换，提高了对比效率
• key值的使用也提高了比对的效率

4 shouldComponentUpdate()的使用

shouldComponentUpdate()避免了子组件无用的刷新

• render函数执行的条件之一是父组件render函数执行
• 场景：
  • 父组件有数据A、数据B
  • 子组件接收了父组件的数据A
  • 当父组件数据A变化时，父组件的render函数会执行，子组件的render函数也会执行并刷新页面，这是正常的情况
  • 当父组件数据B变化时，父组件的render函数会执行，子组件的render函数也会执行并刷新页面，但此时子组件是不需要刷新的，这就导致了性能的损耗。
• 解决方案：
  • 在子组件shouldComponentUpdate()函数中判断数据A是否变化，若没有变化则返回false，后续刷新就不会再执行了。
  • 当当父组件数据B变化时，子组件判断数据A没有变化，则不会执行后续刷新，从而避免了性能损耗。

5 PureComponent

PureComponent定义的组件会自动实现shouldComponentUpdate()生命周期函数来避免store改变引起的不必要的页面刷新

• 使用好处： 不必要一个个手动的给组件增加shouldComponentUpdate()生命周期函数，并判断store数据的改变是否影响本组件。
• 使用前提： store必须是用immutable.js管理的，否则会有很多报错。