useCallbackReactフックの使用方法

useCallback Reactフックが何に役立つのか、そしてそれをどのように扱うのかを調べてください!

私をチェックしてくださいReactフックの紹介まず、あなたが彼らに不慣れであるならば。

私が時々使うReactフックの1つは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ずつ増加するのがわかります。

代わりに、1つのカウンターをインクリメントすると、そのカウンターに関連するすべての関数が再インスタンス化される必要があります。

別の状態値が変更されていない場合は、触れないでください。

さて、ほとんどの場合、これは大きな問題ではありません。ただし、アプリのパフォーマンスに大きなコストがかかることが証明されている、関連のないデータをすべて変更するさまざまな関数を渡す場合を除きます。

それが問題である場合は、使用できます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])

その配列を2番目のパラメータとしてに追加してくださいuseCallback()必要な状態で。

ここで、カウンターの1つをクリックしようとすると、変更された状態に関連する関数のみが再インスタンス化されます。

Codepenでこの例を試すことができます:

ペンを見るuseCallbackフックに反応するフラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!