如何在不重新渲染組件的情況下更改 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 Provider

import 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>
  )
}

Answer 2

我的建議是放棄 useContext鈎子，因為它們似乎會導致重新渲染它們所附加的組件。