-1

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

那是因为useMemo(fn, [])需要数组做一个值的差异来决定是否使用记忆值。它不需要一个标志true来告诉它使用记忆值。

我想到了一种方法，就是

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

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

但是这种方法有点hacky......它可能需要比较${Date.now()} ${Math.random()vs的性能，uuid()因为如果它是CPU密集型的，它只会让情况变得更糟。

细节：

这是因为想要将面板滑出而不更新它，因为面板非常忙于更新，而主窗口正忙于不断更新。为此，当用户单击“更新主窗口”按钮时，我们调度一个动作来设置 redux 状态，我们可以滑出面板，完成后，我们调度另一个动作，这样一个 redux 状态会告诉面板不更新，只是return <div></div>. 另一种方法是只调度第一个动作，并能够“冻结”组件。在这种情况下，我们不需要调度第二个动作。

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

4

1 回答 1

0

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

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

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

return (
  <div>
    <button onChange={() => setUpdateFlag(prevUpdateFlag => !prevUpdateFlag)}>update main window</button>);
于 2021-04-21T06:29:38.607 回答