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