javascript - 如何在不重新渲染组件的情况下更改 useState 的状态,而只是重新渲染其组件
问题描述
如何更改 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;
解决方案
我试着回答你的问题。基本上,您希望能够计算一次值并仅在内容更改时更新它。您可以使用useEffect
. 第一个参数useEffect
是您希望在挂载/更新时发生的功能。当您的函数被卸载(如果有)时,它应该返回一个要运行的函数。第二个参数是确定是否useEffect
运行的东西。我让它在user
更改值时运行。希望这足以让你开始走上这条路。useEffect
您可以在docs中阅读更多信息。
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>
)
}
推荐阅读
- c++ - 如何在双向链表的网格中旋转列
- c# - C# winforms .net 4.7 内存限制
- assembly - 如何使用 ADD 在汇编中左移,而不使用 SHL?
- json - 通过 Curl 检索问题数据的 Jira Rest API:语法问题
- python - 从压缩文件夹内的文件夹中读取 H5File 到 pandas 数据帧
- c++ - 如何保存向量中的位置以供以后插入?
- oracle - 列出列值更改的行
- python - 根据它们的存在更新 mongo 中的多个字段
- python - 如何在python中按索引比较两个列表?
- javascript - Knockout.js 在表中添加和更新数组