React性能优化相关

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需要用户定义浅比较的参数,同时实现多状态管理,因此必须在函数组件内部使用。

上一篇:react性能优化之useMemo,useCallback的使用


下一篇:业界首个机密计算容器运行时—Inclavare Containers正式进入CNCF!