解决react中不必要的render的问题，最常使用的就是通过控制shouldComponentUpdate生命周期的返回值true或false
shouldComponentUpdate(nextProps, nextState) {
return true;
}
在有状态组件和无状态组件中默认返回值是true，所以一旦state或props更新，当前组件就会render。(会进行虚拟Dom的比对，但不一定会进行真实DOM的更新，因为比对结果可能是相同的)。 但是如果你重写了返回值为true,那么componentWillUpdate()，render()和componentDidUpdate()都不会被调用，组件也不会进行更新
下面顺便介绍一下有状态组件和无状态组件：
无状态函数式组件
export default function Demo(props){
let {info} = props;
const print = (info) => {
console.log(info)
}
return (
<div>
hello, {{info}}
</div>
)
}
从代码可以看出来，组件最终返回的是jsx，无状态组件就是不保存状态的组件，没有state,没有生命周期，这也就决定了它是展示性组件，接收props，渲染dom,不关注其他逻辑。官方也比较推荐使用，当你使用有状态组件时，但是只用到了生命周期中的render，就可以直接转换成无状态组件。无状态组件比有状态组件性能稍微好一点，毕竟内部少了很多生命周期的逻辑。(ps:因为无状态组件没有实例化过程，所以也不支持ref)
有状态组件
上述代码对应的有状态组件的写法
export default class Demo extends React.Component{
constructor(props){
super(props);
this.props = props;
this.print = this.print.bind(this)
}
print(info){
console.log(info)
}
render() {
return (
<div>
hello, {{this.props.info}}
</div>
)
}
}
通常我们使用的有状态组件是extends React.Components，有丰富的生命周期函数，默认shouldComponentUpdate()返回值是true。 但是extends React.PureComponent可以默认进行浅比较，减少不必要的更新，比如state或props中的数据是基本数据类型，但是也容易出问题，如果state或props中的数据是数组或者对象类型，每次比对的是引用，比较结果是相等的，就不会进行更新操作，这就不是我们想要的结果了，但是进行深层比对又很昂贵。 所以PureComponent有几个缺陷：
- 不能深层比较两个对象，props为回调函数时，也一直返回true
- 比较检测本身也有性能损失
（ps: 从现在开始想每天坚持写一篇技术总结，现在还是小白阶段，写的不好。如果有幸有人可以看到，欢迎批评指正。目前主要针对前端相关和可视化方面，也请你多多指点，留言给予一些学习建议和一些学习资源的分享以及一些学习网站的推荐，共同进步）
