我正在使用 React Hooks 开发 React 应用程序，尤其是 useContext Hook 女巫很重要。
我的上下文如下所示：
import React, {useState, useReducer, createContext} from 'react';
export const AllContext = createContext();
export const ContextController = (props) =>
{
const [IDArray,setIDArray] = useState([]);
const [refreshSensorMenu, setRefreshSensorMenu] = useState(false);
const [composantSensorData, setComposantSensorData] = useState([
{id:"78320c5b-494c-4538-ae9f-36e28009e9f1",name:"Test1 - Test1",dateCreation: "04/04/2021",configuration:{
manufacturer: "Test1",
model: "Test1",
type: "acceleration",
unit: "m/s2",
signal_conversion: "Factor and Offset",
factor: "5",
offset: "4"
},eventKey:"0",isActive: true}
]);
const [refreshProjectMenu, setRefreshProjectMenu] = useState(false);
const [composantProjectData, setComposantProjectData] = useState([
{id:"28360c5b-600c-4538-he9f-36e45689e9f1",name:"Test1",dateCreation:"16/03/2021",dateLastSave:"16/03/2021",configuration:{
name:"Test1",
customer:"Bob",
machine:[
{
id: "28360n5b-444c-4538-ar9f-36e28009e9f1",
isActive: true,
isValid: true,
kinematic_frequencies: "TEst1",
location: "TEst1",
manufacturer: "TEst1",
model: "TEst1",
name: "Machine1"
}
],
edge:[
{
id: "28360y5b-494i-4538-ak9f-36a28009e9f1",
data_retention: 1,
isActive: true,
isValid: true,
name: "Edge0",
periods: 120,
vibrations_analysis: [],
simple_statistics_analysis: [],
device:[
{
id:"28348y5b-594i-4538-ak9f-36a48109e9f1",
description: "Nice description",
interface: "gantnerQStation",
ip_address: "124.100.100.20",
isActive: true,
isValid: true,
activated:true,
name: "Device 0",
port: "25655",
processing_timeout: "5",
sampling_duration: "10",
sampling_frequency: "18",
trigger_address: "23",
trigger_name: "trigger",
channel:[
{
data_conversion_managed_by_device: true,
id: "28860y5b-782i-4538-aq9f-36a28009e9f1",
isActive: true,
isValid: true,
machine: "28360n5b-444c-4538-ar9f-36e28009e9f1",
name: "Channel1",
offset: "5",
resolution: "5",
sensor: "78320c5b-494c-4538-ae9f-36e28009e9f1",
type: "acceleration",
variable_index: "3"
},
{
data_conversion_managed_by_device: true,
id: "84260y5b-782i-1236-aq9f-36a28009e9f1",
isActive: true,
isValid: true,
machine: "28360n5b-444c-4538-ar9f-36e28009e9f1",
name: "Channel4",
offset: "5",
resolution: "5",
sensor: "78320c5b-494c-4538-ae9f-36e28009e9f1",
type: "acceleration",
variable_index: "3"
} ]
}
]
}
]
}, eventKey:"0",isActive:true},
{id:"48260y5b-782i-8436-aq9f-36a28119e9a1",name:"Test2",dateCreation:"16/03/2021",dateLastSave:"16/03/2021",configuration:{name:"Test2",customer:"Tektiv",edge:[],machine:[]}, eventKey:"1",isActive:true}
]);
const [projectIndexConfiguration, setProjectIndexConfiguration] = useState(0);
const [edgeIndexConfiguration, setEdgeIndexConfiguration] = useState(-1);
const [deviceIndexConfiguration, setDeviceIndexConfiguration] = useState(-1);
const [refreshWindowConfiguration, setRefreshWindowConfiguration] = useState(false);
const [refreshMachineConfiguration,setRefreshMachineConfiguration] = useState(false);
const [refreshEdgeConfiguration,setRefreshEdgeConfiguration] = useState(false);
const [refreshSimpleStatisticsAnalysisConfiguration, setRefreshSimpleStatisticsAnalysisPathConfiguration] = useState(false);
const [refreshVibrationAnalysisConfiguration,setRefreshVibrationAnalysisConfiguration] = useState(false);
const [refreshDeviceConfiguration,setRefreshDeviceConfiguration] = useState(false);
const [refreshChannelConfiguration,setRefreshChannelConfiguration] = useState(false);
const [partCreated, setPartCreated] = useState({created:true,partName:""});
const [componentCreated, setComponentCreated] = useState({created:false,componentName:""});
const [tabConfigEnabled, setTabConfigEnabled] = useState({enabled:false,componentType:""});
const [refreshPathConfiguration, setRefreshPathConfiguration] = useState(false);
return (
<AllContext.Provider value={{
id: [IDArray,setIDArray],
menu:
{
project:
{
refresh: [refreshProjectMenu, setRefreshProjectMenu],
component:
{
data: [composantProjectData, setComposantProjectData]
}
},
sensor:
{
refresh: [refreshSensorMenu, setRefreshSensorMenu],
component:
{
data: [composantSensorData, setComposantSensorData]
}
}
},
configuration:
{
index:
{
project: [projectIndexConfiguration, setProjectIndexConfiguration],
edge: [edgeIndexConfiguration, setEdgeIndexConfiguration],
device: [deviceIndexConfiguration, setDeviceIndexConfiguration]
},
window:
{
refreshWindow: [refreshWindowConfiguration, setRefreshWindowConfiguration],
refreshMachine: [refreshMachineConfiguration,setRefreshMachineConfiguration],
refreshEdge: [refreshEdgeConfiguration,setRefreshEdgeConfiguration],
refreshSimpleStatisticsAnalysis: [refreshSimpleStatisticsAnalysisConfiguration, setRefreshSimpleStatisticsAnalysisPathConfiguration],
refreshVibrationsAnalysis: [refreshVibrationAnalysisConfiguration,setRefreshVibrationAnalysisConfiguration],
refreshDevice: [refreshDeviceConfiguration,setRefreshDeviceConfiguration],
refreshChannel: [refreshChannelConfiguration,setRefreshChannelConfiguration]
},
component:
{
part: [partCreated, setPartCreated],
created: [componentCreated, setComponentCreated],
tab: [tabConfigEnabled, setTabConfigEnabled]
},
path:
{
refresh: [refreshPathConfiguration, setRefreshPathConfiguration]
}
}
}}>
{props.children}
</AllContext.Provider>
);
};
而 ContextController 是这样的：
export default function App(props)
{
return (
<StylesProvider injectFirst>
<ContextController>
<Switch>
<Route path="/" exact component={Box} />
</Switch>
</ContextController>
</StylesProvider>
)
};
我对 Context hook 如何呈现组件有一些疑问。 我认为 组件仅在他订阅的上下文更新时才呈现。 但是，当我更改父组件仅订阅名为 part 的上下文，子组件的父亲订阅名为 created 的上下文时，情况似乎并非如此.
当我更新上下文 created 时，它确实重新渲染子组件女巫是有意义的，但也重新渲染父组件女巫是一个问题。 因为如果像 SnackBar 这样的组件在打开和关闭时更改上下文会刷新父组件，这意味着如果您在 SnackBar 仍然打开的情况下从模态表单中执行某些工作，那么当零食栏自动关闭时，它将刷新父组件，导致重新出现表单并破坏您的所有编辑。
这可能并不大，但对于用于配置文件的应用程序，因此 90% 的表单这个小东西可能会很烦人。 我想可能是因为这两个上下文位于名为 component 的同一个对象中，导致更改对象本身，因此重新渲染所有订阅该对象的组件。 但是当我使上下文不在对象组件中时，它仍然重新渲染父组件。
我们很乐意接受一些解释。 提前致谢。