我应该在自定义钩子中记住函数吗？答案

【问题标题】：Should I memoize functions in custom hook?我应该在自定义钩子中记住函数吗？
【发布时间】：2020-03-17 09:40:30
【问题描述】：

我有计数器组件。我用自定义钩子封装了业务逻辑。我应该通过useCallback 来优化功能吗？如果有input onchange handler，情况会不会一样？

const increment = () => {
    setCount(count + 1);
};

↓

const increment = useCallback(() => {
    setCount(count + 1);
}, [count]);

【问题讨论】：

【解决方案1】：

假设 count 和 setCount 来自const [count,setCount] = useState(0)，那么您应该按以下方式使用回调，以便在组件的生命周期内递增函数保持不变：

const increment = useCallback(() => setCount(count => count + 1),[]);

当计数改变时，您不需要重新创建增量，因为您可以将回调传递给状态设置器函数。

【讨论】：

根据您使用的 linting 工具，除非您将 setCount 传递给 deps 数组，否则您可能会收到错误，但因为 setCount 的引用始终是相同的，明确将其作为依赖项传递不会改变行为，这同样正确。
@PatrickRoberts 我假设 setCount 是来自 useState 的设置器，也许较旧的 linter 有问题，但我不会让 linter 抱怨 useState 设置器是一个依赖项。如果您要使用 setCount(count+1)，那么 count 将是一个依赖项，但将回调传递给 setter 会阻止这种情况。
@bigbabyweb 这不是我的代码，而是你的代码。我假设 count 和 setCount 来自const [count, setCount] = useState(0)。 useState 的 setter 函数可以接收一个值：setCount(count+1) 或回调 setCount(count=>count+1)。它记录在here
@bigbabyweb 使用setCount(count+1) count 来自闭包，并且是 useCallback 的依赖项，因此每次 count 更改时，您的增量函数也会更改。 setCount(count=>count+1) 计数来自 React 并且您不再是 useCallback 的依赖项，因此增量函数在组件的生命周期中不会改变。
@bigbabyweb 也许在您的情况下，当计数发生变化时，增量也会发生变化。在很多情况下，一个通用的onChange 被传递给许多组件，并且您不希望所有组件在只有一个更改时重新呈现。

【解决方案2】：

在函数组件范围内声明的每个函数都应该是 memoized 或 cached 和 useCallback。如果它引用组件范围内的其他变量或函数，则应在其dependency list 中列出它们。否则每次prop/state 更改都会重新创建一个很少使用的行为。

但请记住在优化之前进行测量。 - 甚至官方文档都说要轻松一点。

【讨论】：