持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

问题导入

父组件的数据发生变化，setState()会引起所有子组件也被更新，这种思路很清晰，但优缺点：子组件没有任何变化时也会重新渲染（接收到得props没有发生任何变化）

如何避免不必要的重新渲染呢？此时我们就需要了解一个不常用的钩子

shouldComponentUpdate钩子

shouldComponentUpdate()让 React 知道组件的输出是否不受当前状态或道具变化的影响。默认行为是在每次状态更改时重新渲染，了解其工作原理，能够使用其对类组件进行优化

projects.wojtekmaj.pl/react-lifec…

使用方式

在子组件内添加shouldComponentUpdate钩子判断接收到的props是否发生变化来判断是否更新当前子组件

参考如下

import React, { Component } from 'react'

export default class Son extends Component{
shouldComponentUpdate（props）{
 console.log(props)
 return false
}
render(){
 。。。
}
}

纯组件

纯组件：PureComponent 与 React.Component 功能类似

区别：PureComponent 内部自动实现了shouldComponentUpdate，无需手动比较

原理：纯组件内部自动通过对比前后两次props和state的值，来决定是否进行重新渲染

使用格式：

import React, { PureComponent } from 'react'

export default class Son extends PureComponent{
render(){
 。。。
}
}

不足1：

纯组件内部的对比是shallow.compare(浅层对比)

对于引用类型来说，只比较对象的引用即比较地址是否相同

若想检测到可在父向子传值时改进，更改地址即可

state={obj:{num:1}}
add=()=>{
 const newObj={num:this.state.obj.num+1}
 this.setState(obj:newObj)
}

不足2：

什么时候做性能优化，卡的时候做，没卡不用做，会消耗性能，因为每次都会判断作比较