我閱讀了一些教程useCallback()，包括這個：https : //www.youtube.com/watch?v= wNX5iRhczHM 對不起，它是法語。
在教程中， useCallbacks 只執行一次（通常console.log()存在 a 來演示這一點）
我嘗試了一個非常簡單的示例，但我不明白為什么每次按“增量”時我的useCallback(constant header()) 都會重新運行：我每次都有一個 console.log 而我只希望它一次：
const IndexScreen = () => {
const [count, setCount] = useState(1)
const header = useCallback(
() => {
console.log('execute header')
return (
<Text>
Header
</Text>
)
},
[]
)
return (
<View>
{header()}
<Button onPress={() => setCount(count 1)} title="Increment" />
<Text>
{count}
</Text>
</View>
)
}
非常感謝你
uj5u.com熱心網友回復：
useCallback如果您想記憶一個函式并將其用作依賴項或將其傳遞給子組件，則使用。如果依賴項沒有發生任何變化，此掛鉤可確保您獲得相同的函式參考。
當您的組件呈現時header()，每次都會呼叫一個函式。這是意料之中的。你可能需要的是useMemo，以防止觸發每次你的組件被重新描繪時間你的代碼的那部分：
const IndexScreen = () => {
const [count, setCount] = useState(1)
const header = useMemo(
() => {
console.log('execute header')
return (
<Text>
Header
</Text>
)
},
[]
)
return (
<View>
{header}
<Button onPress={() => setCount(count 1)} title="Increment" />
<Text>
{count}
</Text>
</View>
)
}
useMemo 應該很少使用，因為這是對任何硬計算操作或您不希望在每次渲染時運行的操作的優化。
uj5u.com熱心網友回復：
因為我不會說法語，所以我不能對教程說太多。抱歉 :) 但我想我仍然可以為您提供示例：
可以將其useCallback視為定義（更準確地記住）函式的一種方式。在您的示例中，這確實只完成了一次。
但是，函式本身 ( () => console.log() ....) 可以通過使用header().
在您的示例中，由于header()是 return 陳述句的一部分，因此每次組件重新渲染時都會呼叫它，例如每次它的狀態更改時，例如每次setCounter更改計數器時。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380166.html
上一篇：更新物件陣列中的值狀態