摘要：函數(shù)組件上面我們探討了如何使用和的方法優(yōu)化類組件的性能。它的作用和類似，是用來控制函數(shù)組件的重新渲染的。其實(shí)就是函數(shù)組件的。

原文鏈接: Improving Performance in React Functional Component using React.memo  
原文作者: Chidume Nnamdi  
譯者: 進(jìn)擊的大蔥  
推薦理由: 本文講述了開發(fā)React應(yīng)用時(shí)如何使用shouldComponentUpdate生命周期函數(shù)以及PureComponent去避免類組件進(jìn)行無用的重渲染，以及如何使用最新的React.memo API去優(yōu)化函數(shù)組件的性能。

React核心開發(fā)團(tuán)隊(duì)一直都努力地讓React變得更快。在React中可以用來優(yōu)化組件性能的方法大概有以下幾種:

組件懶加載(React.lazy(...)和)

Pure Component

shouldComponentUpdate(...){...}生命周期函數(shù)

本文還會介紹React16.6加入的另外一個專門用來優(yōu)化函數(shù)組件(Functional Component)性能的方法: React.memo。

組件是構(gòu)成React視圖的一個基本單元。有些組件會有自己本地的狀態(tài)(state), 當(dāng)它們的值由于用戶的操作而發(fā)生改變時(shí)，組件就會重新渲染。在一個React應(yīng)用中，一個組件可能會被頻繁地進(jìn)行渲染。這些渲染雖然有一小部分是必須的，不過大多數(shù)都是無用的，它們的存在會大大降低我們應(yīng)用的性能。

看下面這個例子：

import React from "react";

class TestC extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    
    componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate")
    }
    
    componentDidUpdate(prevProps, prevState) {
        console.log("componentDidUpdate")
        
    }
    
    render() {
        return (
            

            {this.state.count}
            this.setState({count: 1})}>Click Me
            
        );
    }
}
export default TestC;

TestC組件有一個本地狀態(tài)count，它的初始值是0(state = {count: 0})。當(dāng)我們點(diǎn)擊Click Me按鈕時(shí)，count的值被設(shè)置為1。這時(shí)候屏幕的數(shù)字將會由0變成1。當(dāng)我們再次點(diǎn)擊該按鈕時(shí)，count的值還是1, 這時(shí)候TestC組件不應(yīng)該被重新渲染，可是現(xiàn)實(shí)是這樣的嗎？

為了測試count重復(fù)設(shè)置相同的值組件會不會被重新渲染, 我為TestC組件添加了兩個生命周期函數(shù): componentWillUpdate和componentDidUpdate。componentWillUpdate方法在組件將要被重新渲染時(shí)被調(diào)用，而componentDidUpdate方法會在組件成功重渲染后被調(diào)用。

在瀏覽器中運(yùn)行我們的代碼，然后多次點(diǎn)擊Click Me按鈕，你可以看到以下輸出:

我們可以看到"componentWillUpdate"和"componentWillUpdate"在每次我們點(diǎn)擊完按鈕后，都會在控制臺輸出來。所以即使count被設(shè)置相同的值，TestC組件還是會被重新渲染，這些就是所謂的無用渲染。

為了避免React組件的無用渲染，我們可以實(shí)現(xiàn)自己的shouldComponentUpdate生命周期函數(shù)。

當(dāng)React想要渲染一個組件的時(shí)候，它將會調(diào)用這個組件的shouldComponentUpdate函數(shù), 這個函數(shù)會告訴它是不是真的要渲染這個組件。

如果我們的shouldComponentUpdate函數(shù)這樣寫:

shouldComponentUpdate(nextProps, nextState) {
    return true        
}

其中各個參數(shù)的含義是：

nextProps: 組件將會接收的下一個參數(shù)props

nextProps: 組件的下一個狀態(tài)state

因?yàn)槲覀兊膕houldComponentUpdate函數(shù)一直返回true，這就告訴React，無論何種情況都要重新渲染該組件。

可是如果我們這么寫:

shouldComponentUpdate(nextProps, nextState) {
    return false
}

因?yàn)檫@個方法的返回值是false，所以React永遠(yuǎn)都不會重新渲染我們的組件。

因此當(dāng)你想要React重新渲染你的組件的時(shí)候，就在這個方法中返回true，否則返回false?，F(xiàn)在讓我們用shouldComponentUpdate重寫之前的TestC組件:

import React from "react";

class TestC extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    
    componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate")
    }
    
    componentDidUpdate(prevProps, prevState) {
        console.log("componentDidUpdate")
    }
    
    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.count === nextState.count) {
            return false
        }
        return true
    }
    
    render() {
        return ( 
            
 
            { this.state.count } 
             this.setState({ count: 1 }) }> Click Me  
            
        );
    }
}

export default TestC;

我們在TestC組件里添加了shouldComponentUpdate方法，判斷如果現(xiàn)在狀態(tài)的count和下一個狀態(tài)的count一樣時(shí)，我們返回false，這樣React將不會進(jìn)行組件的重新渲染，反之，如果它們兩個的值不一樣，就返回true，這樣組件將會重新進(jìn)行渲染。

再次在瀏覽器中測試我們的組件，剛開始的界面是這樣的:

這時(shí)候，就算我們多次點(diǎn)擊Click Me按鈕，也只能看到兩行輸出:

componentWillUpdate
componentDidUpdate 

因?yàn)榈诙吸c(diǎn)擊Click Me按鈕后count值一直是1，這樣shouldComponentUpdate一直返回false，所以組件就不再被重新渲染了。

那么如何驗(yàn)證后面state的值發(fā)生改變，組件還是會被重新渲染呢？我們可以在瀏覽器的React DevTools插件中直接對TestC組件的狀態(tài)進(jìn)行更改。具體做法是, 在Chrome調(diào)試工具中點(diǎn)擊React標(biāo)簽，在界面左邊選中TestC組件，在界面的右邊就可以看到其狀態(tài)state中只有一個鍵count，且其值是1:

然后讓我們點(diǎn)擊count的值1，將其修改為2，然后按回車鍵:

你將會看到控制臺有以下輸出:

componentWillUpdate
componentDidUpdate
componentWillUpdate
componentDidUpdate

state的count被改變了，組件也被重新渲染了。

現(xiàn)在讓我們使用另外一種方法PureComponent來對組件進(jìn)行優(yōu)化。

React在v15.5的時(shí)候引入了Pure Component組件。React在進(jìn)行組件更新時(shí)，如果發(fā)現(xiàn)這個組件是一個PureComponent，它會將組件現(xiàn)在的state和props和其下一個state和props進(jìn)行淺比較，如果它們的值沒有變化，就不會進(jìn)行更新。要想讓你的組件成為Pure Component，只需要extends React.PureComponent即可。

讓我們用PureComponent去改寫一下我們的代碼吧:

import React from "react";

class TestC extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    
    componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate")
    }
    
    componentDidUpdate(prevProps, prevState) {
        console.log("componentDidUpdate")
    }
    
    /*shouldComponentUpdate(nextProps, nextState) {
        if (this.state.count === nextState.count) {
            return false
        }
        return true
    }*/
    
    render() {
        return ( 
            
 
            { this.state.count } 
             this.setState({ count: 1 })
            }> Click Me  
            
        );
    }
}

export default TestC;

在上面的代碼中，我將shouldComponentUpdate的代碼注釋掉了，因?yàn)镽eact.PureComponent本身就幫我們實(shí)現(xiàn)了一樣的功能。

改完代碼后，我們刷新一下瀏覽器，然后多次點(diǎn)擊Click Me按鈕看組件被渲染了多少遍:

由上面的輸出可知，我們的component只在state由0變?yōu)?時(shí)被重新渲染了，后面都沒有進(jìn)行渲染。

上面我們探討了如何使用PureComponent和shouldComponentUpdate的方法優(yōu)化類組件的性能。雖然類組件是React應(yīng)用的主要組成部分，不過函數(shù)組件(Functional Component)同樣可以被作為React組件使用。

function TestC(props) {
    return (
        

            I am a functional component
        
    )
}

對于函數(shù)組件，它們沒有諸如state的東西去保存它們本地的狀態(tài)(雖然在React Hooks中函數(shù)組件可以使用useState去使用狀態(tài)), 所以我們不能像在類組件中使用shouldComponentUpdate等生命函數(shù)去控制函數(shù)組件的重渲染。當(dāng)然，我們也不能使用extends React.PureComponent了，因?yàn)樗鼔焊筒皇且粋€類。

要探討解決方案，讓我們先驗(yàn)證一下函數(shù)組件是不是也有和類組件一樣的無用渲染的問題。

首先我們先將ES6的TestC類轉(zhuǎn)換為一個函數(shù)組件:

import React from "react";

const TestC = (props) => {
    console.log(`Rendering TestC :` props)
    return ( 
        

            {props.count}
        
    )
}
export default TestC;
// App.js

當(dāng)上面的代碼初次加載時(shí)，控制臺的輸出是:

同樣，我們可以打開Chrome的調(diào)試工具，點(diǎn)擊React標(biāo)簽然后選中TestC組件:

我們可以看到這個組件的參數(shù)值是5，讓我們將這個值改為45, 這時(shí)候?yàn)g覽器輸出:

由于count的值改變了，所以該組件也被重新渲染了，控制臺輸出Object{count: 45}，讓我們重復(fù)設(shè)置count的值為45, 然后再看一下控制臺的輸出結(jié)果:

由輸出結(jié)果可以看出，即使count的值保持不變，還是45, 該組件還是被重渲染了。

既然函數(shù)組件也有無用渲染的問題，我們?nèi)绾螌ζ溥M(jìn)行優(yōu)化呢?

React.memo(...)是React v16.6引進(jìn)來的新屬性。它的作用和React.PureComponent類似，是用來控制函數(shù)組件的重新渲染的。React.memo(...) 其實(shí)就是函數(shù)組件的React.PureComponent。

React.memo使用起來非常簡單，假設(shè)你有以下的函數(shù)組件：

const Funcomponent = ()=> {
    return (
        

            Hiya!! I am a Funtional component
        
    )
}

我們只需將上面的Funcomponent作為參數(shù)傳入React.memo中：

const Funcomponent = ()=> {
    return (
        

            Hiya!! I am a Funtional component
        
    )
}
const MemodFuncComponent = React.memo(FunComponent)

React.memo會返回一個純化(purified)的組件MemoFuncComponent，這個組件將會在JSX標(biāo)記中渲染出來。當(dāng)組件的參數(shù)props和狀態(tài)state發(fā)生改變時(shí)，React將會檢查前一個狀態(tài)和參數(shù)是否和下一個狀態(tài)和參數(shù)是否相同，如果相同，組件將不會被渲染，如果不同，組件將會被重新渲染。

現(xiàn)在讓我們在TestC組件上使用React.memo進(jìn)行優(yōu)化:

let TestC = (props) => {
    console.log("Rendering TestC :", props)
    return ( 
        

        { props.count }
        
    )
}
TestC = React.memo(TestC);

打開瀏覽器重新加載我們的應(yīng)用。然后打開Chrome調(diào)試工具，點(diǎn)擊React標(biāo)簽，然后選中組件。

接著編輯一下props的值，將count改為89，我們將會看到我們的應(yīng)用被重新渲染了:

然后重復(fù)設(shè)置count的值為89:

這里沒有重新渲染！

這就是React.memo(...)這個函數(shù)牛X的地方！

在我們之前那個沒用到React.memo(...)的例子中，count的重復(fù)設(shè)置會使組件進(jìn)行重新渲染?？墒俏覀冇昧薘eact.memo后，該組件在傳入的值不變的前提下是不會被重新渲染的。

以下是幾點(diǎn)總結(jié):

React.PureComponent是銀

React.memo(...)是金

React.PureComponent是給ES6的類組件使用的

React.memo(...)是給函數(shù)組件使用的

React.PureComponent減少ES6的類組件的無用渲染

React.memo(...)減少函數(shù)組件的無用渲染

為函數(shù)組件提供優(yōu)化是一個巨大的進(jìn)步

我是進(jìn)擊的大蔥，關(guān)注我的公眾號，獲取我分享的最新技術(shù)推送！