1. 是什么
react基于虚拟DOM和高效Diff算法的完美配合，实现了对DOM最小粒度的更新，大多数情况下，React对DOM的渲染效率足以我们的业务日常
复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，避免不必要的渲染则是业务中常见的优化手段之一
2. 如何做
在之前文章中，我们了解到render的触发时机，简单来讲就是类组件通过调用setState方法，就会导致render,父组件一旦发生render渲染，子组件一定也会执行render渲染
父组件渲染导致子组件渲染，子组件并没有发生任何改变，这时候就可以从避免无谓的渲染，具体实现的方式有如下：
- shouldComponentUpdate
- PureComponent
- React,memo
2.1 shouldComponentUpdate
通过shouldComponentUpdate生命周期函数来比对state和props ,确定是否要重新渲染默认情况下返回true表示重新渲染，如果不希望组件重新渲染，返回false即可
2.2 PureComponent
跟shouldComponentUpdate原理基本一致，通过对props和state的浅比较结果来实现shouldComponentUpdate ,源码大致如下：
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
当对象包含复杂的数据结构时，对象深层的数据已改变却没有触发render
注意：在react中，是不建议使用深层次结构的数据
2.3 React.momo
React.memo用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件， 与PureComponent十分类似。但不同的是，React.memo只能用于函数组件
import { memo } from 'react';
function Button(props) {
// Component code
}
export default memo(Button);
如果需要深层次比较，这时候可以给memo第二个参数传递比较函数
import { memo } from 'react';
function arePropsEqual(prevProps, nextProps) {
// your code
return prevProps === nextProps;
}
export default memo(Button, arePropsEqual);
3. 总结
在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高
除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染
