首頁猿問使用箭頭函數(shù)上的回調(diào)用法作為道具

使用箭頭函數(shù)上的回調(diào)用法作為道具

JavaScript

拉風(fēng)的咖菲貓 2022-09-29 16:46:45

我對(duì)下面的代碼感到困惑<Signup onClick={() => {}} />然后在注冊(cè)組件中，我看到了 useCallback 的用法，如下所示const Signup = ({onClick}) => { const handleClick = useCallback((e) => {e.preventDefault();},[e]) return <a onClick={handleClick}>signup</a>}使用回調(diào)的意圖是什么？難道不能只是const Signup = ({onClick}) => <a onClick={(e) => e.preventDefault();onClick()}>signup</a>

查看完整描述

1 回答

喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

的主要目的是，在父組件的每次呈現(xiàn)時(shí)，它不會(huì)創(chuàng)建對(duì)與舊函數(shù)完全相同的函數(shù)的新引用。創(chuàng)建此新引用將意味著舊函數(shù)和新函數(shù)不相同 - 即使它們執(zhí)行相同的操作，這會(huì)導(dǎo)致渲染。useCallback

在渲染中，它仍然是對(duì)相同函數(shù)的相同引用（假設(shè)它的依賴項(xiàng)沒有更改）。因此，依賴于此函數(shù)的任何內(nèi)容都不會(huì)重新評(píng)估（即，如果它是組件的依賴項(xiàng)，則為組件的 prop 等）。useCallbackuseEffectuseMemo

因此，在示例案例中，只有在更改時(shí)才會(huì)重新呈現(xiàn)。但除此之外，這很好。SignuponClick

在您的示例中，將始終重新呈現(xiàn)，因?yàn)橹灰讣?jí)重新呈現(xiàn)，函數(shù) to 將始終是新引用。需要明確的是，在函數(shù)中還應(yīng)該使用 useCallback 來使我說的都是正確的。SignuponClick<Signup onClick={() => {}} />() = {}

我看過很多關(guān)于如何額外處理和不值得的文章，只有當(dāng)你知道它會(huì)創(chuàng)造好處時(shí)，你才應(yīng)該使用它。這在學(xué)術(shù)上是100%正確的。但根據(jù)我的謙遜經(jīng)驗(yàn)，不使用它會(huì)導(dǎo)致重新渲染，有時(shí)會(huì)導(dǎo)致復(fù)雜組件中的無限循環(huán)。如果我不確定，我會(huì)使用它。如果我更聰明，我肯定會(huì)猜到。但是當(dāng)我知道我不需要它時(shí)，我不會(huì)使用它。（相反，我只在我知道我需要它時(shí)才使用它）useCallbackuseMemouseEffectuseCallback

反對(duì) 回復(fù) 2022-09-29