使用箭头函数上的回调用法作为道具

Question

我对下面的代码感到困惑<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>

Answer 1

的主要目的是，在父组件的每次呈现时，它不会创建对与旧函数完全相同的函数的新引用。创建此新引用将意味着旧函数和新函数不相同 - 即使它们执行相同的操作，这会导致渲染。useCallback

在渲染中，它仍然是对相同函数的相同引用（假设它的依赖项没有更改）。因此，依赖于此函数的任何内容都不会重新评估（即，如果它是 组件的依赖项，则为组件的 prop 等）。useCallbackuseEffectuseMemo

因此，在示例案例中，只有在更改时才会重新呈现。但除此之外，这很好。SignuponClick

在您的示例中， 将始终重新呈现，因为只要父级重新呈现，函数 to 将始终是新引用。需要明确的是，在函数中还应该使用 useCallback 来使我说的都是正确的。SignuponClick<Signup onClick={() => {}} />() = {}

我看过很多关于如何额外处理和不值得的文章，只有当你知道它会创造好处时，你才应该使用它。这在学术上是100%正确的。但根据我的谦逊经验，不使用它会导致重新渲染，有时会导致复杂组件中的无限循环。如果我不确定，我会使用它。如果我更聪明，我肯定会猜到。但是当我知道我不需要它时，我不会使用它。（相反，我只在我知道我需要它时才使用它）useCallbackuseMemouseEffectuseCallback