如何在不重新渲染组件的情况下更改 useState 的状态，而只是重新渲染它的组件

Question

如何更改 useState 而不重新渲染它而只重新渲染它的组件？为什么我需要是因为我有一些逻辑可以更改 Comp1 中的 useState。如果我要重新渲染 Comp1，我将不得不重新计算它的值。但是如果发生变化，我仍然想重新渲染它的组件。编辑：更大的代码片段。function Comp1() {  const [user, setUser] = useState({});  firebase.auth().onAuthStateChanged(function (_user) {    if (_user) {      // User is signed in.      setUser(_user);    } else {      setUser({ exists: false });    }  });  return (    <div>      <UserProvider.Provider value={{user, setUser}}>        <Comp2 />        <Comp3 />      </UserProvider.Provider>    </div>  );}function Comp2(props) {  const { user, setUser } = useContext(UserProvider);  return (    <div>      {user.exists}    </div>  )}function Comp3(props) {  const { user, setUser } = useContext(UserProvider);  return (    <div>      {user.exists}    </div>  )}//User Providerimport React from 'react';const UserProvider = React.createContext();export default UserProvider;

Answer 1

我试了一下回答你的问题。基本上，您希望能够计算一次值并仅在内容更改时更新它。您可以使用useEffect. 第一个参数useEffect是您希望在挂载/更新时发生的函数。当您的函数被卸载（如果有）时，它应该返回一个要运行的函数。第二个参数是决定是否useEffect运行的东西。我让它在user更改值时运行。希望这足以让您开始走上某些道路。您可以useEffect在文档中阅读更多信息。

function Comp2(props) {

  const { user, setUser } = useContext(UserProvider);

  const { state, setState } = useState({ value: '' });

  useEffect(() => {

    console.log(user);

    // perform expensive operation

    setValue({ value: 'My expensive operation is now stored' });

    return () => {

      // Do you have anything that you would put in componentWillUnmount()?

      // Put that here

    };

  }, [user]);

 console.log(state.value);

  return (

    <div>

      {user.exists}

    </div>

  )

}