如何使用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!