面试-react性能优化

545 阅读3分钟

很多时候都会碰到一些概念性问题,这些问题无非涉及优化||升级||适配||类比优缺。我的技术栈是比较偏向react方向的,故而经常会有面试官问我react性能优化的问题。

-->进入正题

react性能优化肯定就是避免不了scu(shouldComponentUpdate),purecomponent,memo,immutable

存在维度的划分:层级;class和函数组件;节点多寡

节点少:class : scu-->purecomponent
节点少:函数:memo
节点多:immutable+scu/memo

那怎么讲:对于react的性能优化还是很有必要,不能因为父组件渲染而子组件没有变化也得跟着渲染从而产生不必要的花销。解决原理是通过props和state的浅对比来判断子组件是否渲染,具体操作是在class组件下通过生命周期的scu来判断,也可以通过继承purecomponent来减少每次重复写法;在函数组件下通过memo来判断;在大量节点的情况下就考虑用immutable配合了。

优化原理:通过对于props和state的浅对比来判断是否重新渲染

浅对比:对象的对比他们的内存地址,只要内存地址一致,就不重新渲染,反之,对象的内存地址不一致,就渲染

immutable:每次操作都会产生一个新的对象出来,由于它会复用之前数据的数据结构,所以产生新的数据也很快。

-->面试官会怎么问

写在开始:传统的肯定是先抛出问题来解题,但是面试嘛,肯定是先看答案才畅快,这点我深有体会~~

  1. 说下react的性能优化吧?(PS:这种奔放型的面试官很少见)
  2. 为什么react组件会重复渲染?
  3. 在react项目中一旦父组件渲染,子组件就会跟着渲染,可是子组件又没有任何改变。这种情况下就产生了不必要的开销,如何进行(性能上面)优化?
  4. 那多节点该如何优化?

-->谈一谈

那为什么面试官会问react性能优化呢?

这个属于react架构中比较浅显的部分,但是也是对性能有提升的地方,算是个比较基本的点,是考量二至三年的前端常出的问题。react性能优化属于react框架下经常会使用的技能点,它会延伸到函数组件和class组件的差异;class和react-hooks的比较;往前的话就是一个生命周期的概念了,生命周期的话就会扯到新旧生命周期上,以及新的fiber算法和旧递归的差异。


写在最后:

react性能优化这个知识点是你迈入react框架面临第一个难点,也是一个很有意思的地方,对于过去的切图仔而言,多数是在为还原设计稿而劳累,早已缺乏该有的乐趣了,而现在的框架下的前端开发同学就可以通过简单的方法操作就能实现以前不敢想的性能优化。

另外文中多数都是cv,别介意,都是为了学习🐶~~