[英]React - Rerenders in useEffect lags UI
我正在尝试一种更好的方法来对我的表单进行 onChange 验证,但由于多次重新渲染,它真的很滞后。
这是我的 useEffect 代码:
useEffect(() => {
if (passwordValues.password) {
setValidPassword({ confirmPassword: validateConfirmPassword(correctPassword), password: validatePassword(correctPassword) })
}
if(formData.name){
setValidFormData(validFormData => ({...validFormData, name: validateData(correctFormData, "name")}))
}
if(formData.lastName){
setValidFormData(validFormData => ({...validFormData, lastName: validateData(correctFormData, "lastName")}))
}
if(formData.email){
setValidFormData(validFormData => ({...validFormData, email: validateData(correctFormData, "email")}))
}
if(formData.phone){
setValidFormData(validFormData => ({...validFormData, phone: validateData(correctFormData, "phone")}))
}
}, [passwordValues, correctPassword, correctFormData, formData])
我知道我可能只需要几行代码就可以做到这一点,但这就是在做这么多重新渲染的原因吗?
每次输入更改时,我的 formData、passwordValues、correctPassword 和 correctFormData 都会更改。
- 编辑 -
我删除了数组中的大部分依赖项,只保留了 [formData],提高了速度,但仍然有点滞后。
我写在这里,因为解释会有点长,不适合评论。
这些场景在任何应用程序中都很常见,您必须对值的变化做出反应并解决这个问题,我刚刚创建了一个特殊的钩子, use-effect-x (编写测试待定)
这个自定义钩子会告诉您更改的项目集,这在这里非常有用。 以下是我能够根据您的输入编写的代码。 您可以在任何地方使用 useEffectX 作为 useEffect 的替代品。 这样不需要的 setValidFormData 将不会运行。 试一试,让我知道。
import { useEffectX } from "use-effect-x";
useEffectX(
({
changedItem: [
changeObjConfirmPassword,
changeObjPassword,
changeObjName,
changeObjLastname,
changeObjEmail,
changeObjPhone,
],
}) => {
if (changeObjConfirmPassword.changed) {
setValidPassword({
confirmPassword: validateConfirmPassword(confirmPassword),
});
}
if (changeObjPassword.changed) {
setValidPassword({
password: validatePassword(correctPassword),
});
}
if (changeObjName.changed) {
setValidFormData((validFormData) => ({
...validFormData,
name: validateData(correctFormData, "name"),
}));
}
if (changeObjLastname.changed) {
setValidFormData((validFormData) => ({
...validFormData,
lastName: validateData(correctFormData, "lastName"),
}));
}
if (changeObjEmail.changedd) {
setValidFormData((validFormData) => ({
...validFormData,
email: validateData(correctFormData, "email"),
}));
}
if (changeObjPhone.changed) {
setValidFormData((validFormData) => ({
...validFormData,
phone: validateData(correctFormData, "phone"),
}));
}
},
[confirmPassword, password, name, lastName, email, phone]
);
谢谢,让我知道,如果这不是您所期望的建议,我会移动它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.