我想做什么：
- 我有各种自包含的组件，它们在自身内部管理自己的状态。每个组件的状态绝对应该在每个组件中处理。
- 它们的初始状态来自后端。在此之后，他们保持自己的状态。 我不想为每个组件发出
- 很多单独的请求，所以我发出一个请求来获取所有组件的数据，并将其向下传递，为每个组件提供初始数据。
我当前的解决方案：
const MyApp = () => {
const [initialState, setInitialState] = useState();
useEffect(()=>{getInitialState().then((data)=>{
setInitialState(data);
})},[])
if (!initialState) {
return <div>Loading...</div>
}
return (
<>
<ComponentA initialData={initialState.A} />
<ComponentB initialData={initialState.B} />
<ComponentC initialData={initialState.C} />
</>
)
}
我当前解决方案的问题：
以上有效，但感觉不对。我已经调用了上述initialState但它不应该是状态。它更像是一个道具，存储应用程序整个生命周期的初始数据令人困惑。诚然，它没有做任何事情，也不会造成任何伤害，但如果它没有被任何东西使用，为什么要把它留在那里呢？
我考虑过在渲染应用程序之前获取数据，然后将数据作为道具传入，但随后我将不显示任何内容，而是加载屏幕，因此这似乎也不是一个好方法。
我的问题：
是否有更好的(和/或标准(方法来实现上述目标？(我想使用钩子而不是类(。也许以上并不是一个坏主意，但感觉一定有更好的方法来做到这一点，而无需诉诸"全局"应用程序状态。我想使我的状态靠近使用它相关部分的组件。
在这里使用状态没有错。但是，假设getInitialState只应该调用一次，我会将其包装在useEffect钩子中，这样在挂载MyApp时只获取一次数据。这将防止在组件重新渲染时重复调用getInitialState。
useEffect(() => {
getInitialState().then((data)=>{
setInitialState(data);
});
}, []);
如果您不希望使用状态来维护数据，则必须依赖上下文 API，或使用某种状态管理库，例如 Redux。