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

時間 2019-11-09

標籤 react 性能探索避免必要渲染欄目 React 简体版

原文原文鏈接

背景

上一篇文章的結尾
http://imweb.io/topic/5985cc4...
咱們說到，也許，不是全部的節點都須要從新渲染，對於那些不須要渲染的節點，咱們如何找到它們並作優化呢？html

本篇文章來具體解答這個問題。react

應用分析

首先，先看這個應用：頁面的兩部分分別渲染5000個節點，從1-5000。當點擊按鈕以後，第二部分的節點會更新，從新渲染從2-5001的數字，可是第一部分保持不變。git

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/hhhuangqio...github

感興趣的同窗能夠下載跑一跑代碼web

分析更新時間

這裏用react的Perf工具來測量從新渲染的時間。npm

使用方法：redux

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

這裏主要用到四個方法：數組

Perf.start()：開始計時app
Perf.stop()：結束計時less
Perf.printInclusive():打印組件總的渲染時間
Perf.printWasted():打印浪費的時間

當咱們點擊按鈕，能夠看到控制檯打印出下面的信息：

由控制檯的數據能夠看出，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)
}

而後點擊按鈕看控制檯

能夠看到Value did not change. Avoidable re-render!的警告，是否是很實用！