React组件间性能优化

组件性能优化

• 减少state中的数据：

  • state 中只存储跟组件渲染相关的数据

  • 对于一些不用做渲染的数据不要放在 state 中，例如定时器id等

  • 对于这些渲染中不需要的数据直接放在 this 中就可以

• 避免不必要的重新渲染：

  • 组件的更新机制：父组件的更新也会引起子组件的更新

  • 出现问题：子组件没有任何变化的时候，也会重新渲染

  • 解决方式：使用 钩子函数 shouldComponentUpdate(nextProps， nextState)

  • 通过设置返回值决定组件是否要重新渲染。返回true 表示重新渲染，返回 false 表示不重新渲染

  • 该钩子函数实在更新阶段的钩子函数，组件重新渲染前执行

//解释案例
shouldComponentUpdate(nexrProps, nextState) { 
    //nextProps : 最新的 props 值
    //nextState ： 最新的 state 值
    return false // true
}

// 如果上次的数值结果与这次相同的话，就不用重新渲染 shouldComponentUpdate(nextProps, nextState) { if(nextState.num == this.state.num) { return false } return true }

- **纯组件：**
 
- 纯组件： React.PureComponent 和 React.Component 功能相似
 
- 在纯组件中，自动实现了 shouldComponentUpdate 这个钩子，不需要手动进行判断
 
- 内部实现：纯组件内部通过 **shallow compare(浅层对比)** 对比了前后两次的 props 和 state 的值，从而来判断是否重新渲染组件
 
- 浅层对比：
 
  - 对于普通值类型：比较两个值是否相等
 
  - 对于引用值类型：只比较了对象的引用地址是否相同----不能直接在原数据上直接修改了，否则页面不会重新渲染,需要重新创建一个对象。
 
    ```javascript
    state = {
        obj : {
            num : 1
        }
    }
    handleClick = () => {
        //使用扩展运算符创建一个新对象
        const newObj = {...this.state.obj, num : 2}
        this.setState(() =>{
            return {
                obj = newObj
            }
        })
    }
    ```