当我在表单中输入输入时，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 存储或全局身份验证上下文，用于反映和重新呈现导航栏。

Answer 2

所以，我遇到了同样的问题，我可以使用useRef 和useCallback 解决它，我将尝试以问答形式进行解释。抱歉，如果我不是很清楚，这是我的第一个 StackOverFlow 评论，我是 React 的初学者 :)

为什么是useRef？ 每次看到组件更新时，React 都会通过检查先前对象和当前对象是否相同来重新渲染。在 useRef 的情况下，它仅检查对象 Id 而不是其中的内容，即 Ref 组件内的 current 的值。所以如果你改变当前的值，React 不会考虑这个。 （这就是我们想要的）

为什么是useCallback？ 仅仅是因为它只会在我们调用它或一个（或多个）依赖项发生变化时运行。由于我们使用的是 Ref，所以当它内部的当前值发生变化时，它不会被调用。

更多信息：https://reactjs.org/docs/hooks-reference.html

根据以上信息，您的代码应如下所示（仅做登录部分）：

import React, { useContext, useRef } from 'react';


const App = () => {


  const emailRef = useRef(null);  
  const passwordRef = useRef(null);
  const logRef = useRef(null);


  const loginUpdate = useCallback( async (event) => {
        event.preventDefault();
        // Your logic/code
        // For value do: 
        // const email = emailRef.current.value;
    
     }, [emailRef, passwordRef, logRef]);

  
  return (

   <div className="navbar">


     {log?(
        <form>
        <input
          ref={emailRef}
          type="text"
          placeholder="email"
         />
        <input
          ref={passwordRef}
          type="text"
          placeholder="password"
         />
        <button onClick={loginUpdate}>login</button>
        </form>
     ):(
       // Not doing this part because I am lazy :)
       <button onClick={logout}>logout</button>
     )}
    </div>
  );
}

export default App;

Answer 3

有一些错别字。它对我有用

https://codesandbox.io/s/cold-sun-s1225?file=/src/App.js:163-208

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;