Javascript 在表单中输入输入时，React组件不必要地重新呈现

我有一个react组件，它管理用户登录和注销，当用户在登录字段中键入电子邮件和密码时，整个组件Navbar在每次击键时都会不必要地重新呈现给Dom，从而降低速度

当用户在登录文件中键入凭据时，如何防止Navbar重新呈现

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 store或全局身份验证上下文，以反映并重新提交导航栏。

有一些输入错误。它对我有用

---

它工作得很好，但我很关心性能。感谢您的努力我已经用just login form制作了另一个组件，现在当子组件更改时Navbar不会重新渲染，但请注意，当我在输入区域中键入时，子组件会重新渲染，我希望在我完成输入字段的输入之前，没有办法停止重新渲染。您可以使用非受控组件和onBlur上的设置/保存值来完成此操作，但这不是一个好方法。不要担心这些呈现，除非页面中有数百万的输入，否则这不是什么大问题

import React, { useContext,useState } from 'react';
// import { Postcontext } from '../contexts/Postcontext';
// import axios from 'axios';

const App = () => {


  // const { token,setToken } = useContext();
  const [email,setEmail] = useState('');  
  const [password,setPassword] = useState(''); 
  const[log,setLog] = useState(true)  


  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 App;