javascript - 如何在不重新渲染组件的情况下更改 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 更改值时运行。希望这足以让你开始做某事。您可以在 docs 中阅读有关 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>
  )
}