使用useEffect需要时间来加载，不使用它会导致组件渲染两次

Question

我一直在研究密码生成器，我想要一个在用户打开网站时生成初始密码的功能。

加载需要时间，比如说 1-2 秒。

const [password, setPassword] = useState<string>("");
useEffect(() => {
    setPassword(generatePassword(current));
}, []);

这会将密码呈现两次...

const [password, setPassword] = useState<string>(generatePassword());

我将其传递到输入框中。

<input type="text" disabled value={password} readOnly />

Answer 1

你尝试过吗

useLayOutEffect

。您应该尝试一下，因为

useLayOutEffect

甚至在初始渲染之前就运行了。你可以从react官方文档中查看

useLayOutEffect

的完整文档