拉風的咖菲貓
2022-09-29 16:46:45
我對下面的代碼感到困惑<Signup onClick={() => {}} />然后在注冊組件中,我看到了 useCallback 的用法,如下所示const Signup = ({onClick}) => { const handleClick = useCallback((e) => {e.preventDefault();},[e]) return <a onClick={handleClick}>signup</a>}使用回調的意圖是什么?難道不能只是const Signup = ({onClick}) => <a onClick={(e) => e.preventDefault();onClick()}>signup</a>
1 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
的主要目的是,在父組件的每次呈現時,它不會創建對與舊函數完全相同的函數的新引用。創建此新引用將意味著舊函數和新函數不相同 - 即使它們執行相同的操作,這會導致渲染。useCallback
在渲染中,它仍然是對相同函數的相同引用(假設它的依賴項沒有更改)。因此,依賴于此函數的任何內容都不會重新評估(即,如果它是 組件的依賴項,則為組件的 prop 等)。useCallbackuseEffectuseMemo
因此,在示例案例中,只有在更改時才會重新呈現。但除此之外,這很好。SignuponClick
在您的示例中, 將始終重新呈現,因為只要父級重新呈現,函數 to 將始終是新引用。需要明確的是,在函數中還應該使用 useCallback 來使我說的都是正確的。SignuponClick<Signup onClick={() => {}} />() = {}
我看過很多關于如何額外處理和不值得的文章,只有當你知道它會創造好處時,你才應該使用它。這在學術上是100%正確的。但根據我的謙遜經驗,不使用它會導致重新渲染,有時會導致復雜組件中的無限循環。如果我不確定,我會使用它。如果我更聰明,我肯定會猜到。但是當我知道我不需要它時,我不會使用它。(相反,我只在我知道我需要它時才使用它)useCallbackuseMemouseEffectuseCallback
添加回答
舉報
0/150
提交
取消
