React-55：组件优化PureComponent

Component的2个问题

1. 只要执行setState(),即使不改变状态数据, 组件也会重新render()
2. 只当前组件重新render(), 就会自动重新render子组件~效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

定义的数据

  state = { carName: '奔驰c36', stus: ['小张', '小李', '小王'] }

解决

办法1：
	重写`shouldComponentUpdate()`方法
	比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

shouldComponentUpdate(nextProps, nextState) {
    // console.log(this.props,this.state); //目前的props和state
    // console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return !this.state.carName === nextState.carName
  }
  ~~~~~~~~ or
    shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props, this.state) //目前的props和state
    console.log(nextProps, nextState) //接下要变化的目标props，目标state
    return !this.props.carName === nextProps.carName
  }

办法2:  
	使用PureComponent
	PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
	注意: 
		只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
		不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

import React, { PureComponent } from 'react'
export default class Parent extends PureComponent {
	state = {carName:"奔驰c36",stus:['小张','小李','小王']}
}