React - 使用 useRef 进行优化（性能）

Question

这样做的区别

const Card = ({ contentType }) => {
   const isPost = useRef(contentType === "post");

   ...
}

和这个

const Card = ({ contentType }) => {
   const isPost = contentType === "post";

   ...
}

是不是在第一种情况下， isPost 只会被计算一次并被记忆，而在另一种情况下，它会在每次重新渲染时计算，对吗？

因此，如果我们进行像这样的计算，每次重新渲染时值都相同，我们是否应该将它们放入 useRef 中？

我知道 useRef 用于避免重新渲染时的值更改，某种 useState 不会重新渲染组件，但是如果该值是常量并在组件主体中计算，该怎么办？

注意：我知道这看起来像是“个人意见”，但我的问题是关于性能影响和 useRef 钩子的正确使用。

Answer 1

是不是在第一种情况下， isPost 只会被计算一次并被记忆，而在另一种情况下，它会在每次重新渲染时计算，对吗？

不会。在这两种情况下contentType === "post"都会进行评估。实际上，你会得到不同的行为。对于 ref，如果contentType在任何时候发生变化，isPost都将保持不变。isPost.current = contentType === "post"除非你在其他地方更新它。

如果你想记住，你会这样做：

const isPost = React.useMemo(() => contentType === "post", [contentType]);

在这种情况下，上述内容真的有必要吗？我会说不。React.useMemo已经需要比较依赖项，并且contentType === "post"已经是一个非常轻量级的操作。在大多数情况下，您可以从 state 和 props 导出状态，而不必太担心。