React性能优化之减少组件渲染次数

Posted 2023-04-17

参考技术A

react默认情况下，只要父组件的状态改变了，不管子组件是否依赖这个状态，子组件都会重新渲染。
那么如果我们想要实现子组件所依赖的状态没有发生改变，那子组件就不重新渲染，该怎么做呢？

一般情况下我们对class组件做优化，都是在shouldComponentUpdate这个生命周期里面做相应的判断来确认是否需要重新渲染，以达到优化的效果。

后来React为class组件提供了pureComponent来实现这一效果。pureComponent可以自动执行shouldComponentUpdate函数，当组件要更新的时候，会对传入的props和state进行一次浅比较，如果比较出来是一致的，就不进行组件更新。

注意 ：这里是进行的浅比较，当props是对象的时候，pureComponent没法做判断，会自动认为是不一致的，从而进行比较。所以在使用pureComponent的时候，应避免传入的状态是对象的情况。

对于函数式组件，react也提供了react.memo的形式来做优化处理。

React.memo只检查props的变更，默认情况下，如果传入的是对象的形式，React.memo只做浅比较，如果想要做复杂的比较的话，可以通过第二个参数传入具体的比较规则。

注意：这里的areEqual判断的结果跟class组件的shouldComponentUpdate判断返回的结果是相反的。

第 005 期 Vue 性能优化之减少渲染的次数

1

场景描述

减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

2

优化写法

1. 缓存动态组件

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

<component
  v-bind:is="currentTabComponent" />

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

<keep-alive>
  <component
    v-bind:is="currentTabComponent" />
</keep-alive>

2. 合理使用 v-if，v-show

v-if 有更高的切换开销。v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 插槽(Slot) 改成新的写法

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

<!-- 默认作用域插槽 (default scoped slot) -->
<my-component>
  <template slot-scope="{ msg }">
    {{ msg }}
  </template>
</my-component>

<!-- 具名插槽 (named slots) -->
<my-component2>
  <template slot="header">
    <p>Header</p>
  </template>
  
  <template
    slot="item"
    slot-scope="data"
  >
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
</my-component2>

Vue 2.6 加了新的插槽写法: v-slot。如下:

<!-- 默认作用域插槽 (default scoped slot) -->
<my-component v-slot="{ msg }">
  {{ msg }}
</my-component>

<!-- 具名插槽 (named slots) -->
<my-component2>
  <template v-slot:header>
    <p>Header</p>
  </template>
  
  <template v-slot:item="{ data }">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
</my-component2>

了解更多插槽新写法的内容，见 Vue 2.6 发布了^[1]。

参考文档

• https://juejin.cn/post/6940190960609394695 
• [1] Vue 2.6 发布了：https//zhuanla.zhihu.com/p/56260917