useCallback 对非记忆组件有意义吗？答案

【问题标题】：Does useCallback make sense for not memoized components?useCallback 对非记忆组件有意义吗？
【发布时间】：2021-06-30 08:32:38
【问题描述】：

在和解期间，react 比较树并获取差异。当组件没有被记忆时，通过使用记忆钩子来减少这些差异是否有意义？

例子：

// Does useCallback make sense here?
const onPress = useCallback(() => console.log('Press!'), []);

return (
  <Pressable onPress={onPress}/> // Pressable is neither a memoized FC nor a PureComponent
)

编辑：很高兴收到一些数字，例如以毫秒为单位的性能下降/改进，尤其是对于本机反应。

【问题讨论】：

标签： reactjs react-native react-hooks memoization reconciliation

【解决方案1】：

因此，React 自动拥有一个 memoize 系统，该系统在渲染时检查所有组件 props 的差异，无论您的组件是否被记忆。使用此系统，仅对原始类型（数字、字符串、布尔值等）做出反应检查。

但是，如果你将一个函数作为 props 传递，并且想要对函数调用做出反应，那么 useCallback 就变得很有用了。

react useCallback useCallback

【讨论】：

问题是，当组件没有被记忆并且不是 PureComponent 时，这个函数记忆是否有意义？

【解决方案2】：

没有。总的来说，React 太快了。 useCallback 和 useMemo 应该仅在需要时使用。

注意：“过早的优化是万恶之源”ref

useCallback 和 useMemo 有自己的开销。检查this，Kent C Dodds 对此进行了更深入的介绍。

这样想：

当您滚动网页时，会不断发生大量重新渲染。即使在某些动画期间也有很多重新渲染，但我们不会因为浏览器的速度而面临性能问题。

为了涵盖极端情况，我还建议您阅读 layout thrashing 和 debounce input handlers

【讨论】：

不幸的是，那篇文章中没有数字：/另外，当我滚动网页时，可能会有很多滞后，具体取决于网站。

【解决方案3】：

我不这么认为。这是 React.org 站点中的示例。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

这里的 [a, b] 是一个依赖列表。这意味着当 a 或 b 发生变化时会自动调用回调。它似乎不像你的那样被称为。您没有传递任何依赖项，并且不会调用回调。如果你想使用回调，我认为你可以这样改变。

const [pressed, setPressed] = useState(false)
useCallback(() => console.log('Press'), [pressed])

return (
    <Pressable onPress={() => setPressed (pressed => !pressed) } />
)

【讨论】：

这只是一个错字，添加了部门，谢谢！