如何使用useCallback React鉤子

找出useCallback React鉤子有什麼用,以及如何使用它!

看看我的React鉤子介紹首先,如果您是他們的新手。

我有時使用的一個React鉤子是useCallback

import React, { useCallback } from 'react'

當您的組件具有經常重新渲染子級的組件,並向其傳遞回調時,此鉤子很有用:

import React, { useState, useCallback } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

這裡的問題是,每當更新計數器時,都會重新創建所有3個功能。

您可以通過實例化一個設置數據結構,並向其中添加每個功能。為什麼設置?因為它僅存儲唯一的元素,在我們的情況下,這意味著不同的(唯一實例化的)函數。

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

functionsCounter.add(increment) functionsCounter.add(decrement) functionsCounter.add(incrementOtherCounter)

alert(functionsCounter)

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

如果您嘗試使用此代碼,您將看到警報一次增加3。

相反,應該發生的事情是,如果您增加一個計數器,則與該計數器相關的所有功能都應重新實例化。

如果另一個狀態值未更改,則不應觸摸它。

現在,在大多數情況下,這不是一個大問題,除非您傳遞了許多不同的功能,所有這些功能都在改變著無關的數據位,事實證明這對您的應用程序性能造成了高昂的代價。

如果有問題,您可以使用useCallback

這是我們的做法。代替:

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

將所有這些調用包裝在:

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

確保您將該數組作為第二個參數添加到useCallback()與所需的狀態。

現在,如果您嘗試單擊計數器之一,則將僅重新實例化與更改狀態有關的功能。

您可以在Codepen上嘗試以下示例:

看筆反應useCallback鉤子由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!