0

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

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

4

3 回答 3

0

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

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

反应 useCallback useCallback

于 2021-06-30T08:43:49.450 回答
0

我不这么认为。这是 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) } />
)
于 2021-06-30T09:31:37.687 回答
0

不，一般来说 React 太快了。useCallback并且useMemo应该仅在需要时使用。

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

useCallback并useMemo附带自己的间接费用。检查这个，Kent C Dodds 对此进行了更深入的研究。

这样想：

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

只是为了涵盖极端情况，我还建议您阅读布局抖动和去抖动输入处理程序

于 2021-06-30T08:54:37.687 回答