如何使用 ReactJS 的 useMemo() 来冻结组件的内容？

问题描述

简短的问题是：我们如何冻结组件的内容，可能是通过使用 useMemo() 并告诉它冻结内容？

那是因为 useMemo(fn,[]) 需要对数组进行值的 diff 来决定是否使用记忆值。不需要 true 标志来告诉它使用记忆值。

我想到了一种方法，那就是

useMemo(fn,[flag || `${Date.Now()} ${Math.random()`])

所以如果 flag 为真，它不会评估第二部分，当它第二次为真时，内容被冻结。第二个选项是使用 uuid() 而不是第二部分，它每次都应该是唯一的。第三种选择是把所有导致输出相同的参数都收集起来放到数组中，这样收集起来可能比较困难，而且容易出现bug。

但是这种方法有点老套……它可能需要比较 ${Date.Now()} ${Math.random() 与 uuid() 的性能，因为如果它是 cpu 密集型的，它只会使情况变得更糟。

---

详情：

这源于想把面板滑出不更新，因为面板很忙更新，主窗口忙不断更新。要做到这一点，当用户点击“更新主窗口”按钮时，我们发送一个动作来设置 redux 状态，我们可以滑出面板，完成后，我们发送另一个动作，这样一个 redux 状态就会告诉面板不更新，只是return <div></div>。另一种方法是分派第一个动作，并能够“冻结”组件。在这种情况下，我们不需要调度第二个动作。

但是 useMemo() 不采用“冻结”标志，而是采用依赖项数组。有没有办法使用标志使其冻结？

解决方法

如果我理解正确，您的实际依赖是在“更新主窗口”按钮上。 您可以像这样添加状态，它应该在用户单击按钮后更新内容。 useMemo documentation

const [updateFlag,setUpdateFlag] = useState(false);

useMemo(() => {},[updateFlag]);

return (
  <div>
    <button onChange={() => setUpdateFlag(prevUpdateFlag => !prevUpdateFlag)}>update main window</button>);