Question

在和解期间，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
)

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

Answer 1

因此，无论您的组件是否被记忆，React 都会自动拥有一个记忆系统，该系统会在渲染时检查所有组件道具的差异。有了这个系统，react 只检查原始类型（数字、字符串、布尔值等）。

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

react useCallback useCallback

Answer 2

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

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

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

这样想：

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

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

Answer 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) } />
)

useCallback 对没有记忆的组件有意义吗？

3 个答案: