如何在不重新渲染组件的情况下更改 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钩子，因为它们似乎会导致重新渲染它们所附加的组件。