前言
目的
目前在工作中，大量的项目都是使用react来进行开展的，了解掌握下React的性能优化对项目的体验和可维护性都有很大的好处，下面介绍下在React中可以运用的一些性能优化方式；
性能优化思路
对于类式组件和函数式组件来看，都可以从以下几个方面去思考如何能够进行性能优化
减少重新Render的次数
减少渲染的节点
降低渲染计算量
合理设计组件
减少重新Render的次数
在React里时间耗时最多的一个地方是Reconciliation（reconciliation的最终目标是以最有效的方式，根据新的状态来更新UI，我们可以简单地理解为diff），如果不执行Render，也就不需要Reconciliation，所以可以看出减少Render在性能优化过程中的重要程度了。
PureComponent
React.PureComponent与React.Component很相似。两者的区别在于React.Component并未实现shouldComponentUpdate()，而React.PureComponent中以浅层对比Prop和State的方式来实现了该函数。
需要注意的是在使用PureComponent的组件中，在Props或者State的属性值是对象的情况下，并不能阻止不必要的渲染，是因为自动加载的shouldComponentUpdate里面做的只是浅比较，所以想要用PureComponent的特性，应该遵守原则：
确保数据类型是值类型
如果是引用类型，不应当有深层次的数据变化(解构)
ShouldComponentUpdate
可以利用此事件来决定何时需要重新渲染组件。如果组件Props更改或调用setState，则此函数返回一个Boolean值，为true则会重新渲染组件，反之则不会重新渲染组件。
在这两种情况下组件都会重新渲染。我们可以在这个生命周期事件中放置一个自定义逻辑，以决定是否调用组件的Render函数。
下面举一个小的例子来辅助理解下：比如要在你的应用中展示学生的详细资料，每个学生都包含有多个属性，如姓名、年龄、爱好、身高、体重、家庭住址、父母姓名等；在这个组件场景中，只需要展示学生的姓名、年龄、住址，其他的信息不需要在这里展示，所以在理想情况下，除去姓名、年龄、住址以外的信息变化组件是不需要重新渲染的；
示例代码如下：
importReactfrom"react";
exportdefaultclassShouldComponentUpdateUsageextendsReact.Component{
constructor(props){
super(props);
this.state={
name:"小明",
age:12,
address:"xxxxxx",
height:,
weight:40}
}