如何在不重新呈现组件的情况下更改 useState 的状态，而只重新呈现其组件

Question

如何在不重新渲染它而只渲染它的组件的情况下更改 useState？为什么我需要是因为我有一些逻辑可以更改 Comp1 中的使用状态。如果我重新渲染 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钩子，因为它们似乎会导致它们所附加到的组件重新渲染。