useMemo優化React Hooks程序性能（九）

useMemo主要用來解決使用React hooks產生的無用渲染的性能問題。使用function的形式來聲明組件，失去了shouldCompnentUpdate（在組件更新之前）這個生命周期，也就是說我們沒有辦法通過組件更新前條件來決定組件是否更新。而且在函數組件中，也不再區分mount和update兩個狀態，這意味着函數組件的每一次調用都會執行內部的所有邏輯，就帶來了非常大的性能損耗。useMemo和useCallback都是解決上述性能問題的，這節課先學習useMemo.

性能問題展示案例

先編寫一下剛才所說的性能問題，建立兩個組件,一個父組件一個子組件，組件上由兩個按鈕，一個是小紅，一個是志玲，點擊哪個，那個就像我們走來了。在/src文件夾下，新建立一個Example7的文件夾，在文件夾下建立一個Example7.js文件.然后先寫第一個父組件。

import React , {useState,useMemo} from 'react';

function Example7(){
    const [xiaohong , setXiaohong] = useState('小紅待客狀態')
    const [zhiling , setZhiling] = useState('志玲待客狀態')
    return (
        <>
            <button onClick={()=>{setXiaohong(new Date().getTime())}}>小紅</button>
            <button onClick={()=>{setZhiling(new Date().getTime()+',志玲向我們走來了')}}>志玲</button>
            <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
        </>
    )
}

父組件調用了子組件，子組件我們輸出兩個姑娘的狀態，顯示在界面上。代碼如下：

function ChildComponent({name,children}){
    function changeXiaohong(name){
        console.log('她來了，她來了。小紅向我們走來了')
        return name+',小紅向我們走來了'
    }

    const actionXiaohong = changeXiaohong(name)
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

然后再導出父組件，讓index.js可以渲染。

export default Example7

這時候你會發現在瀏覽器中點擊志玲按鈕，小紅對應的方法都會執行，結果雖然沒變，但是每次都執行，這就是性能的損耗。目前只有子組件，業務邏輯也非常簡單，如果是一個后台查詢，這將產生嚴重的后果。所以這個問題必須解決。當我們點擊志玲按鈕時，小紅對應的changeXiaohong方法不能執行，只有在點擊小紅按鈕時才能執行。

useMemo 優化性能

其實只要使用useMemo，然后給她傳遞第二個參數，參數匹配成功，才會執行。代碼如下：

function ChildComponent({name,children}){
    function changeXiaohong(name){
        console.log('她來了，她來了。小紅向我們走來了')
        return name+',小紅向我們走來了'
    }

    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

這時在瀏覽器中點擊一下志玲按鈕，changeXiaohong就不再執行了。也節省了性能的消耗。案例只是讓你更好理解，你還要從程序本身看到優化的作用。好的程序員對自己寫的程序都是會進行不斷優化的，這種沒必要的性能浪費也是絕對不允許的，所以useMemo的使用在工作中還是比較多的。希望小伙伴們可以掌握。

轉自：https://jspang.com/posts/2019/08/12/react-hooks.html