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

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

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

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

Pure Component

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

本文還會(huì)介紹React16.6加入的另外一個(gè)專(zhuān)門(mén)用來(lái)優(yōu)化函數(shù)組件(Functional Component)性能的方法: React.memo。

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

看下面這個(gè)例子：

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

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

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

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

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

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

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

shouldComponentUpdate(nextProps, nextState) {
    return true        
}

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

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

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

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

可是如果我們這么寫(xiě):

shouldComponentUpdate(nextProps, nextState) {
    return false
}

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

因此當(dāng)你想要React重新渲染你的組件的時(shí)候，就在這個(gè)方法中返回true，否則返回false?，F(xiàn)在讓我們用shouldComponentUpdate重寫(xiě)之前的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;

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

再次在瀏覽器中測(cè)試我們的組件，剛開(kāi)始的界面是這樣的:

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

componentWillUpdate
componentDidUpdate 

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

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

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

你將會(huì)看到控制臺(tái)有以下輸出:

componentWillUpdate
componentDidUpdate
componentWillUpdate
componentDidUpdate

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

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

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

讓我們用PureComponent去改寫(xiě)一下我們的代碼吧:

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í)被重新渲染了，后面都沒(méi)有進(jìn)行渲染。

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

function TestC(props) {
    return (
        

            I am a functional component
        
    )
}

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

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

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

import React from "react";

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

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

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

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

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

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

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

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

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

React.memo使用起來(lái)非常簡(jiǎn)單，假設(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會(huì)返回一個(gè)純化(purified)的組件MemoFuncComponent，這個(gè)組件將會(huì)在JSX標(biāo)記中渲染出來(lái)。當(dāng)組件的參數(shù)props和狀態(tài)state發(fā)生改變時(shí)，React將會(huì)檢查前一個(gè)狀態(tài)和參數(shù)是否和下一個(gè)狀態(tài)和參數(shù)是否相同，如果相同，組件將不會(huì)被渲染，如果不同，組件將會(huì)被重新渲染。

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

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

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

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

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

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

這里沒(méi)有重新渲染！

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

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

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

React.PureComponent是銀

React.memo(...)是金

React.PureComponent是給ES6的類(lèi)組件使用的

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

React.PureComponent減少ES6的類(lèi)組件的無(wú)用渲染

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

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

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