React性能优化相关

Posted 2020-11-24 lowki

React渲染页面包括两个很重要的组成部分：

　　1.构建虚拟dom

　　2.根据虚拟dom变化渲染真实dom

对于第二部分来说，我们很难深入到React核心的diff算法等，因此主要从第一部分入手来优化性能。

针对第一部分，从优化角度来说，最直观想到的就是缩短构建虚拟dom的时间。具体到组件层面，就是减少无状态组件的函数执行以及类组件的render。

函数组件：

　　hooks是专门针对函数组件来设计的模式，如果不使用hooks，函数组件便无法保存和管理自己的状态，直白一点理解就是函数每次执行的时候内部的变量都会重新初始化。hooks通过将变量值保存在函数外部实现状态的保存，这样即使下一次函数再次执行，其内部变量被赋予的将是上次被更改过的变量值。这样也导致一些问题，比如每次变量赋值的顺序都要一致，否则变量之间的值就会错乱。

　　如果函数组件内部有子组件需要被渲染，就可以通过上一次某些变量的状态来决定是否渲染此子组件：React.useMemo((props)=>CC||FC,[...args]),这里的args在下次函数组件执行的时候每项都会与上一次保留下来的args浅比较，相同则直接返回第一个参数上次执行后保存下来的单例。函数组件利用hook实现了多状态管理，这里的useMemo只在函数组件内部执行。

类组件：

　　PureComponent是官方写明的优化方法，其特点是自带shouldComponentUpdate钩子，通过浅比较传进来的props来实现返回上次render返回的组件还是重新render返回一个新的组件。PureComponent可以看作是类组件内部实现优化的方法，和上面提到的useMemo相比，由于其无法定制浅比较的对象，功能显得不够强大。

　　一个既可以作用于函数组件又可以作用于类组件的通用方法是React.memo(CC || FC),其功能也是监听自身的props，并通过浅比较来决定是否执行return或render返回一个新的组件。memo和useMemo虽然最终都实现了缓存上一个单例的效果，但不同之处也很明显，首先就是用于浅比较的对象不同，其次memo是通过闭包来缓存状态，这意味着应该使用其执行后返回的组件，而useMemo需要用户定义浅比较的参数，同时实现多状态管理，因此必须在函数组件内部使用。