React性能探索 --- 避免不必要渲染

IMWeb前端团队

发布于 2019-12-04 17:24:30

7700

发布于 2019-12-04 17:24:30

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb 黄qiong 原文出处：IMWeb社区 未经同意，禁止转载

背景

上一篇文章的结尾 https://cloud.tencent.com/developer/article/1009611 我们说到，也许，不是所有的节点都需要重新渲染，对于那些不需要渲染的节点，我们如何找到它们并做优化呢？

本篇文章来具体解答这个问题。

应用分析

首先，先看这个应用：页面的两部分分别渲染5000个节点，从1-5000。当点击按钮之后，第二部分的节点会更新，重新渲染从2-5001的数字，但是第一部分保持不变。

import React, { createElement, Component } from 'react';
import {render} from 'react-dom';
import Perf from 'react-addons-perf';
import ListItem from './ListItem'

function arrayGenerator(length) {
  return Array.apply(null, { length: length }).map(Number.call, Number)
}


class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      multiplier: 1
    }
  }

  resetMultiplier() {
    this.setState({ multiplier: 2 })
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.resetMultiplier.bind(this)}>Click Me</button>
        <ul>
          {
            arrayGenerator(5000).map(i => {
              return <ListItem key={i} text={i}/>
            })
          }
          {
            arrayGenerator(5000).map(i => {
              return <ListItem key={i} text={i + this.state.multiplier}/>
            })
          }
        </ul>
      </div>
    );
  }
}

render(<App />,document.getElementById('main'));

gitbug 链接： https://github.com/hhhuangqiong/performance-for-react

感兴趣的同学可以下载跑一跑代码

分析更新时间

这里用react的Perf工具来测量重新渲染的时间。

使用方法：

npm install --save-dev react-addons-perf
import Perf from 'react-addons-perf'

这里主要用到四个方法：

Perf.start()：开始计时
Perf.stop()：结束计时
Perf.printInclusive():打印组件总的渲染时间
Perf.printWasted():打印浪费的时间

开始计时的函数，我把它放到resetMultiplier里，即将发生发生改变时开始计时。然后在componentDidUpdate里，用Perf.stop()结束计时，然后打印渲染组件的时间跟浪费的时间。

  componentDidUpdate() {
    Perf.stop()
    Perf.printInclusive()
    Perf.printWasted()
  }

  resetMultiplier() {
    Perf.start()
    this.setState({ multiplier: 2 })
  }

当我们点击按钮，可以看到控制台打印出下面的信息：

由控制台的数据可以看出，App用了90.59ms渲染，其中渲染ListItem的时间为55ms，渲染了10000次，其中有5000次是浪费的，因为这部分页面的内容完全没有更新的改动。

如何修复

既然是不需要渲染，那就要阻止它的渲染。React给我们提供了一个方法shouldComponentUpdate(),当这个方法返回true的时候，需要重新渲染，false的时候不需要（默认是true).

在这个栗子中，只要text的值不变，就不需要重新渲染。所以，可以这样改写ListItem 的shouldComponentUpdate

import React, { Component } from 'react'

export default class ListItem extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.text !== this.props.text  
  }

  render() {
    let { text } = this.props
    return <li>{text}</li>
  }
}

在重新点击一下按钮，在控制台可以发现

App总的渲染时间降到了62.14ms，并且ListItem只重新渲染了5000个节点，完全消除了浪费的渲染。

对于上面的写法，React提供了一个新的组件PureComponent来做这件事，它会自动浅对比props/state，当两者相同的时候不渲染节点。所以，listItem又可以改写成

import React, { PureComponent } from 'react'

export default class ListItem extends PureComponent {
  render() {
    let { text } = this.props
    return <li>{text}</li>
  }
}

跑一跑代码

通过控制台可以看到达到的效果是一样的(有点误差是正常的)。

这里再安利一个可以发现应用里是否存在不该重新渲染的节点工具：why-did-you-update

使用方法

npm i --save-dev why-did-you-update
import React from 'react'
if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update')
  whyDidYouUpdate(React)
}

然后点击按钮看控制台