用Memo和Callback发现错误，找到代码的真相

useMemo 和 useCallback 的设计初衷

useMemo 和 useCallback 是 React 在 16.8 版本中引入的两个新的 Hook。它们可以帮助我们优化组件的性能，主要是通过以下两种方式：

• useMemo: useMemo 可以帮助我们避免对某些值进行不必要的重新计算。具体来说，useMemo 会在组件渲染时计算一个值，并将这个值存储起来。如果组件在下一次渲染时没有发生变化，那么 useMemo 就会直接返回之前存储的值，而不会重新计算。
• useCallback: useCallback 可以帮助我们避免对某些函数进行不必要的重新创建。具体来说，useCallback 会在组件渲染时创建一个函数，并将这个函数存储起来。如果组件在下一次渲染时没有发生变化，那么 useCallback 就会直接返回之前存储的函数，而不会重新创建。

使用 useMemo 和 useCallback 时常见的错误

在使用 useMemo 和 useCallback 时，有几个常见的错误需要注意：

• 使用 useMemo 来存储状态: useMemo 只能用来存储那些不会随着组件状态的变化而改变的值。如果我们使用 useMemo 来存储状态，那么当状态改变时，useMemo 存储的值不会更新，这会导致组件出现错误。
• 使用 useCallback 来创建事件处理函数: useCallback 只能用来创建那些不会随着组件状态的变化而改变的函数。如果我们使用 useCallback 来创建事件处理函数，那么当组件状态改变时，useCallback 创建的函数不会更新，这会导致事件处理函数无法正常工作。
• 过度使用 useMemo 和 useCallback: useMemo 和 useCallback 都是很强大的 Hook，但它们并不是万能的。如果我们过度使用它们，那么可能会导致代码变得难以理解和维护。

如何正确地使用 useMemo 和 useCallback

为了正确地使用 useMemo 和 useCallback，我们可以遵循以下几个原则：

• 只将 useMemo 用来存储那些不会随着组件状态的变化而改变的值。
• 只将 useCallback 用来创建那些不会随着组件状态的变化而改变的函数。
• 避免过度使用 useMemo 和 useCallback。

为什么绝大部分的使用可以移除掉

useMemo 和 useCallback 都是非常有用的 Hook，但它们并不是万能的。在某些情况下，我们其实可以不使用它们。

例如，如果我们只需要在一个组件中使用一个值，那么我们就不需要使用 useMemo 来存储这个值。我们只需要直接在组件中计算这个值即可。

再例如，如果我们只需要在一个组件中使用一个函数，那么我们就不需要使用 useCallback 来创建这个函数。我们只需要直接在组件中定义这个函数即可。

结论

useMemo 和 useCallback 是 React 中两个非常有用的 Hook，它们可以帮助我们优化组件的性能。但是，很多人在使用它们时都会犯一些错误。在本文中，我们介绍了这些错误，以及如何正确地使用这两个 Hook。