当我在表单中输入输入时，React 组件不必要地重新渲染

Question

我有一个反应组件来管理用户登录和退出，当用户在登录字段中输入电子邮件和密码时，整个组件（导航栏）在每次击键时都会重新渲染到 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;

Answer 1

这是因为它是相同的组件，需要重新渲染以反映输入文本的更改。如果您希望更改电子邮件但不影响导航栏，则创建一个子组件并将输入移动到该组件中，useState()在子组件中使用其中管理输入值，当您最终提交并且用户登录时，您可以更新一些全局状态，例如redux 存储或全局身份验证上下文来反映和重新渲染导航栏。