React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式

更新時間：2023年06月06日 16:53:54 作者：學(xué)全棧的灌湯包

這篇文章主要介紹了React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

useCallback和useMemo性能優(yōu)化

useCallback的解析

useCallback的使用

useCallback實際的目的是為了進(jìn)行性能的優(yōu)化。

useCallback進(jìn)行什么樣的優(yōu)化呢？

例如下面這個計數(shù)器的案例, 我們點擊按鈕時, counter數(shù)據(jù)會發(fā)生變化, App函數(shù)組件就會重新渲染, 意味著increment函數(shù)就會被重新定義一次, 每點擊一次按鈕, increment函數(shù)就會重新被定義;

雖然每次定義increment函數(shù), 垃圾回收機制會將上一次定義的increment函數(shù)回收, 但是這種不必要的重復(fù)定義是會影響性能的

import React, { memo, useState } from 'react'
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? function increment() {
? ? setCounter(counter + 1)
? }
? return (
? ? <div>
? ? ? <h2>{counter}</h2>
? ? ? <button onClick={() => increment()}>+1</button>
? ? </div>
? )
})
export default App

如何進(jìn)行性能的優(yōu)化呢？

調(diào)用useCallback會返回一個 memoized(有記憶的) 的回調(diào)函數(shù);

在依賴不變的情況下，多次定義的時候，返回的回調(diào)函數(shù)是相同的;

參數(shù)一: 傳入一個回調(diào)函數(shù), 如果依賴發(fā)生改變會定義一個新的該回調(diào)函數(shù)使用, 如果依賴沒有發(fā)生改變, 依然使用原來的回調(diào)函數(shù)
參數(shù)二: 用于控制依賴的, 第二個參數(shù)要求傳入一個數(shù)組, 數(shù)組中可以傳入依賴, 傳空數(shù)組表示沒有依賴

const memoizedCallback = useCallback(
? () => {
? ?doSomething(a, b)
? },
? [a, b]
)

useCallback拿到的結(jié)果是函數(shù)

useCallback的作用

通常使用useCallback的目的是在向子組件傳遞函數(shù)時, 將要傳遞的函數(shù)進(jìn)行優(yōu)化在傳遞給子組件, 避免子組件進(jìn)行多次渲染;

并不是為了函數(shù)不再重新定義, 也不是對函數(shù)定義做優(yōu)化

我們來看下面這樣一個案例：

定義一個子組件Test, 并將increment函數(shù)傳遞到子組件中, 我們在子組件中可以拿到increment方法修改App組件中的counter;

由于counter發(fā)生改變, 就會重新定義一個新的increment函數(shù), 因此我們只要修改了counter, 就會傳遞一個新的increment函數(shù)到Test組件中; Test組件中的props就會發(fā)生變化, Test組件會被重新渲染

import React, { memo, useState, useCallback } from 'react'
const Test = memo((props) => {
? console.log("Test組件被重新渲染")
? return (
? ? <div>
? ? ? <button onClick={props.increment}>Test+1</button>
? ? </div>
? )
})
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? function increment() {
? ? setCounter(counter + 1)
? }
? return (
? ? <div>
? ? ? <h2>{counter}</h2>
? ? ? <button onClick={increment}>+1</button>
? ? ? <Test increment={increment}/>
? ? </div>
? )
})
export default App

如果此時App組件中再定義一個方法changeMessage用來修改message;

我們會發(fā)現(xiàn)當(dāng)message發(fā)生改變時, 子組件Test也會被重新渲染; 這是因為message發(fā)生改變, App組件會重新渲染, 那么就會重新定義一個新的increment函數(shù), 將新的increment函數(shù)傳遞到Test組件, Test組件的props發(fā)生改變就會重新渲染

import React, { memo, useState, useCallback } from 'react'
const Test = memo((props) => {
? console.log("Test組件被重新渲染")
? return (
? ? <div>
? ? ? <button onClick={props.increment}>Test+1</button>
? ? </div>
? )
})
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? const [message, setMessage] = useState("哈哈哈哈")
? function increment() {
? ? setCounter(counter + 1)
? }
? return (
? ? <div>
? ? ? <h2>{counter}</h2>
? ? ? <button onClick={increment}>+1</button>
? ? ? <h2>{message}</h2>
? ? ? <button onClick={() => setMessage("呵呵呵呵")}>修改message</button>
? ? ? <Test increment={increment}/>
? ? </div>
? )
})
export default App

但是如果我們使用useCallback, 就可以避免App組件中message發(fā)生改變時, Test組件重新渲染

因為message組件發(fā)生改變, 但是我們下面的useCallback函數(shù)是依賴counter的, 在依賴沒有發(fā)生改變時, 多次定義返回的值是相同的(也就是修改message重新渲染App組件時, increment并沒有重新定義, 依然是之前的); 就意味著Test組件中的props沒有改變, 因此Test組件不會被重新渲染

如果是counter值發(fā)生改變, 因為useCallback函數(shù)是依賴counter的, 所以會定義一個新的函數(shù)給increment; 當(dāng)向Test組件傳遞新的increment時, Test組件的props就會改變, Test依然會重新渲染, 這也是我們想要實現(xiàn)的效果

import React, { memo, useState, useCallback } from 'react'
const Test = memo((props) => {
? console.log("Test組件被重新渲染")
? return (
? ? <div>
? ? ? <button onClick={props.increment}>Test+1</button>
? ? </div>
? )
})
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? const [message, setMessage] = useState("哈哈哈哈")
? // 使用useCallback依賴于counter
? const increment = useCallback(() => {
? ? setCounter(counter + 1)
? }, [counter])
? return (
? ? <div>
? ? ? <h2>{counter}</h2>
? ? ? <button onClick={increment}>+1</button>
? ? ? <h2>{message}</h2>
? ? ? <button onClick={() => setMessage("呵呵呵呵")}>修改message</button>
? ? ? <Test increment={increment}/>
? ? </div>
? )
})
export default App

還可以再進(jìn)一步的進(jìn)行優(yōu)化：

現(xiàn)在我們的代碼是counter發(fā)生變化時, useCallback會重新定義一個新的函數(shù)返回給increment; 但是我們想做到, counter發(fā)生變化, 依然使用原來的函數(shù), 不需要重新定義一個新的函數(shù);

可能會有小伙伴想, 直接將依賴改為一個空數(shù)組, 但是如果是這樣的話就會產(chǎn)生閉包陷阱;

我們修改counter時確實不會重新生成一個新的函數(shù), 但是原來的函數(shù)中使用的counter永遠(yuǎn)是之前的值, 也就是0;

這是因為我們舊的函數(shù)在定義的那一刻, counter的值是0;

由于修改counter依然使用舊的函數(shù), 這樣無論我們修改多少次counter, 頁面展示的數(shù)據(jù)永遠(yuǎn)是 0 + 1 的結(jié)果

const increment = useCallback(() => {
? setCounter(counter + 1)
}, [])

這個時候我們就需要結(jié)合使用另一個hook: useRef

useRef函數(shù)在組件多次進(jìn)行渲染時, 返回的是同一個值；

我們就可以將最新的counter儲存到useRef返回的對象的current屬性中；

這樣做的好處就是, counter發(fā)生改變時, 也不會重新定義一個函數(shù), 意味著修改counter也不會導(dǎo)致Test組件重新渲染

import React, { memo, useState, useCallback, useRef } from 'react'
const Test = memo((props) => {
? console.log("Test組件被重新渲染")
? return (
? ? <div>
? ? ? <button onClick={props.increment}>Test+1</button>
? ? </div>
? )
})
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? const [message, setMessage] = useState("哈哈哈哈")
? // 組件進(jìn)行多次渲染, 返回的是同一個ref對象
? const counterRef = useRef()
? // 將最新的counter保存到ref對象current屬性中
? counterRef.current = counter
? const increment = useCallback(() => {
? ? // 在修改數(shù)據(jù)時, 引用保存到ref對象current屬性的最新的值
? ? setCounter(counterRef.current + 1)
? }, [])
? return (
? ? <div>
? ? ? <h2>{counter}</h2>
? ? ? <button onClick={increment}>+1</button>
? ? ? <Test increment={increment}/>
? ? ? <h2>{message}</h2>
? ? ? <button onClick={() => setMessage("呵呵呵呵")}>修改message</button>
? ? </div>
? )
})
export default App

useMemo的解析

useMemo實際的目的也是為了進(jìn)行性能的優(yōu)化, 例如下面這個例子

我們定義一個計算累加的函數(shù)calcNumTotal, 在App組件中調(diào)用這個函數(shù)計算結(jié)果

但是counter改變時, App組件就會重新渲染, 那么calcNumTotal函數(shù)又會重新計算; 但是counter的改變和calcNumTotal函數(shù)并沒有關(guān)系, 卻要重新渲染; 這種類似的場景我們就可以使用useMemo進(jìn)行性能優(yōu)化

import React, { memo } from 'react'
import { useState } from 'react'
// 定義一個函數(shù)求和
function calcNumTotal(num) {
? let total = 0
? for (let i = 1; i <= num; i++) {
? ? total += i
? }
? return total
}
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? return (
? ? <div>
? ? ? {/* couter改變, 組件重新渲染, 意味著calcNumTotal函數(shù)也會重新執(zhí)行, 重新計算結(jié)果 */}
? ? ? <h2>計算結(jié)果: {calcNumTotal(100)}</h2>
? ? ? <h2>當(dāng)前計數(shù): {counter}</h2>
? ? ? <button onClick={() => setCounter(counter + 1)}>+1</button>
? ? </div>
? )
})
export default App

如何使用 useMemo進(jìn)行性能的優(yōu)化呢?

useMemo返回的也是一個 memoized(有記憶的) 值; 在依賴不變的情況下，多次定義的時候，返回的值是相同的;

參數(shù)一: 傳入一個回調(diào)函數(shù)
參數(shù)二: 傳入一個數(shù)組, 表示依賴, 什么都不依賴傳入空數(shù)組; 如果不傳則該函數(shù)什么都不會做, 無意義

const memoizedValue = useMemo(
? () => {
? ? computeExpensiveValue(a, b)
? },?
? [a, b]
)

這樣我們就可以對上面的代碼進(jìn)行優(yōu)化了, 實現(xiàn)counter發(fā)生變化, 而calcNumTotal函數(shù)不需要重新計算結(jié)果

import React, { memo, useMemo, useState } from 'react'
// 定義一個函數(shù)求和
function calcNumTotal(num) {
? console.log("calcNumTotal函數(shù)被調(diào)用")
? let total = 0
? for (let i = 1; i <= num; i++) {
? ? total += i
? }
? return total
}
const App = memo(() => {
? const [counter, setCounter] = useState(10)
? let result = useMemo(() => {
? ? return calcNumTotal(50)
? }, [])
? return (
? ? <div>
? ? ? {/* couter改變, 組件重新渲染, 意味著calcNumTotal函數(shù)也會重新執(zhí)行, 重新計算結(jié)果 */}
? ? ? <h2>計算結(jié)果: {result}</h2>
? ? ? <h2>當(dāng)前計數(shù): {counter}</h2>
? ? ? <button onClick={() => setCounter(counter + 1)}>+1</button>
? ? </div>
? )
})
export default App

useMemo與useCallback的區(qū)別：

useMemo拿到的傳入回調(diào)函數(shù)的返回值, useCallback拿到的傳入的回調(diào)函數(shù)本身;

簡單來說useMemo是對函數(shù)的返回值做優(yōu)化, useCallback是對函數(shù)做優(yōu)化;

useCallback(fn, [])和uesMemo(() => fn, [])表達(dá)的是同一個意思