Reactjs 使用钩子对复杂json进行状态管理

关于用带有React钩子的巨大树状结构列表构建React应用程序和状态管理的问题-

---

我得到了一个巨大的JSON列表，当通过套接字进行更新或通知时，我将收到相同的树结构JSON，小叶子节点将被更改，它将重新呈现整个子组件，我知道，使用redux，我可以通过只传递特定的状态对象而忽略其他状态对象并将它们保存在存储中来构造应用程序。我应该如何使用react挂钩来构造我的组件，比如管理这个巨大的JSON对象

将大JSON保存在一个状态中，并根据对该大JSON树的特定属性所做的更改，将multiple

useffect（）

设置为运行。更新每个相应的

useffect（）

中与这些属性相关的组件

函数应用程序（）{
//这是为了避免在第一次渲染时运行的效果（当第一次创建状态时）
const isFirstRender=React.useRef（true）；
//这是你的大JSON树
const[deepState，setDeepState]=React.useState({
普罗帕：{
普罗帕：错
},
建议B：{
propBB：错
}
});
//这将模拟您的第一个套接字消息
React.useffect（（）=>{
设置超时(
（）=>setDeepState（（prevState）=>({
普罗帕：{
普罗帕：错
},
建议B：{
普罗布：是的
}
})),1500);
},[]);
//这模拟了第二个套接字消息
React.useffect（（）=>{
设置超时(
（）=>setDeepState（（prevState）=>({
普罗帕：{
普罗帕：是的
},
建议B：{
普罗布：是的
}
})),3000);
},[]);
//这将更新关心一个特定DEEP属性的组件
React.useffect（（）=>{
如果（isFirstRender.current==真）{
返回；
}
log（'Deep属性propB.propBB已更改为：'+deepState.propB.propBB）；
log（'将更新依赖于propB.propBB的组件'）；
}，[deepState.propB.propBB]）；
//这将更新关心另一个特定DEEP属性的组件
React.useffect（（）=>{
如果（isFirstRender.current==真）{
返回；
}
log（'Deep属性propA.propAA已更改为：'+deepState.propA.propAA）；
log（'将更新依赖于propA.propAA的组件'）；
}，[deepState.propA.propA]）；
//这是为了避免在第一次渲染时运行的效果（当第一次创建状态时）
React.useffect（（）=>{
isFirstRender.current=false；
},[]);
返回(
某些成分
);
}
ReactDOM.render（，document.getElementById（'root'））