如何在不重新渲染组件的情况下更改 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) {&nbsp; const { user, setUser } = useContext(UserProvider);&nbsp; const { state, setState } = useState({ value: '' });&nbsp; useEffect(() => {&nbsp; &nbsp; console.log(user);&nbsp; &nbsp; // perform expensive operation&nbsp; &nbsp; setValue({ value: 'My expensive operation is now stored' });&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; // Do you have anything that you would put in componentWillUnmount()?&nbsp; &nbsp; &nbsp; // Put that here&nbsp; &nbsp; };&nbsp; }, [user]);&nbsp;console.log(state.value);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {user.exists}&nbsp; &nbsp; </div>&nbsp; )}