我有一个管理用户登录和退出的 react 组件,当用户在登录字段中输入电子邮件和密码时,整个组件(导航栏)会在每次击键时重新渲染到 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;
最佳答案
这是因为它是相同的组件,需要重新渲染以反射(reflect)输入文本的更改。如果您希望更改电子邮件但不影响导航栏,则创建一个子组件并将输入移动到该组件中,在子组件中使用 useState()
管理输入值,并在您最终提交并记录用户时然后你可以更新一些全局状态,如 redux 存储或全局身份验证上下文来反射(reflect)和重新渲染导航栏。
关于javascript - 当我在表单中输入输入时,React 组件不必要地重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61185676/