作者：灰灰来源：JS每日一题
一、是什么
React凭借virtualDOM和diff算法拥有高效的性能，但是某些情况下，性能明显可以进一步提高
在前面文章中，我们了解到类组件通过调用setState方法，就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染
当我们想要更新一个子组件的时候，如下图绿色部分：
理想状态只调用该路径下的组件render：
但是react的默认做法是调用所有组件的render，再对生成的虚拟DOM进行对比(黄色部分)，如不变则不进行更新
从上图可见，黄色部分diff算法对比是明显的性能浪费的情况
二、如何做
在React中如何避免不必要的render中，我们了解到如何避免不必要的render来应付上面的问题，主要手段是通过shouldComponentUpdate、PureComponent、React.memo，这三种形式这里就不再复述
除此之外，常见性能优化常见的手段有如下：
避免使用内联函数
使用ReactFragments避免额外标记
使用Immutable
懒加载组件
事件绑定方式
服务端渲染
避免使用内联函数
如果我们使用内联函数，则每次调用render函数时都会创建一个新的函数实例，如下：
importReactfrom"react";exportdefaultclassInlineFunctionComponentextendsReact.Component{render(){return(divh1Wel