我有一个反应组件来管理用户登录和退出,当用户在登录字段中输入电子邮件和密码时,整个组件(导航栏)在每次击键时都会重新渲染到 Dom,从而降低了速度。
当用户在登录字段中输入凭据时,如何防止导航栏重新呈现?
import React, { useContext,useState } from 'react';
import { Postcontext } from '../contexts/Postcontext';
import axios from 'axios';
const Navbar = () => {
const { token,setToken } = useContext(Postcontext);
const [email,setEmail] = useState(''); **state manages user email for login**
const [password,setPassword] = useState(''); **state manages user password for login**
const[log,setLog] = useState(true) **state manages if user logged in or not based on axios post request**
const login=(e)=>{
//function for login using axios
})
}
const logout=(e)=>{
//function for logout using axios
}
return (
<div className="navbar">
{log?(
<form>
<input value={email} type="text" placeholder="email" onChange={(e)=>setEmail(e.target.value)}/>
<input value={password} type="text" placeholder="password" onChange={(e)=>setPassword(e.target.value)}/>
<button onClick={login}>login</button>
</form>
):(
<button onClick={logout}>logout</button>
)}
</div>
);
}
export default Navbar;
这是因为它是相同的组件,需要重新渲染以反映输入文本的更改。如果您希望更改电子邮件但不影响导航栏,则创建一个子组件并将输入移动到该组件中,使用管理输入值useState()
在子组件中,当您最终提交并且用户登录时,您可以更新一些全局状态,例如 redux 存储或全局身份验证上下文来反映和重新渲染导航栏。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)