Question

我有一个函数，可为div创建一个ID，并附加一个随机数以确保唯一性。问题是我需要在组件加载时仅运行一次随机数生成器，否则随机数生成器将在每个输入上运行。

const randomID = Math.floor(1000 + Math.random() * 9000);
const generateID = text => {
    return text.replace(/\s+/g, '-') + '-' + randomID;
};

我已经考虑过使用useEffect，但它似乎运行不正确：

useEffect(() => {
    const randomID = Math.floor(1000 + Math.random() * 9000);
},[]);

如何确保randomID号仅运行一次，以确保randomID号仅在组件加载时运行，而不是每次组件加载时运行？

Answer 1

可以在<WrapPanel x:Name="wrapPanel1"> <TextBlock>Short</TextBlock> <TextBlock TextWrapping="Wrap" Width="{Binding ActualWidth, ElementName=wrapPanel1}"> Long text that should wrap when it flls available space.dfsfdsfs fsdfsdfsdf sdfsdfssfsfsd </TextBlock> </WrapPanel>中使用它，以使其在每个组件安装中仅运行一次，但是要使用该值，还应该有一个状态来对其进行设置并在HTML元素中使用它。像这样：

useEffect

Answer 2

您可以使用useMemo钩子，该钩子具有与useEffect相同的依赖项数组。它是为生成值而设计的，因此它返回一个值，而useEffect则不。

const randomId = useMemo(() => {
    return Math.floor(1000 + Math.random() * 9000);
},[]);

但是请注意，这并非100％的时间是完美的：

您可能依赖useMemo作为性能优化，而不是语义保证。将来，React可能会选择“忘记”一些以前记忆的值，并在下一次渲染时重新计算它们，例如释放屏幕外组件的内存。编写代码，使其在不使用useMemo的情况下仍然可以正常工作-然后添加它以优化性能。

在React中只运行一次函数

2 个答案: