ReactJs何时使用context而不是state，何时使用props而不是state

Question

我是React的新手，我正在使用带有redux的v17，我想知道最佳实践。

我正在实现一个影响很多组件的暗/亮模式，我正在使用商店状态来保存当前主题和要使用的颜色：

import { createSlice } from "@reduxjs/toolkit";
const darkMode = {
darkMode: true,
backgroundColor: "#1e272e",
textColor1: "#d2dae2",
textColor2: "#d2dae2"
};
const lightMode = {
darkMode: false,
backgroundColor: "#ecf0f1",
textColor1: "#1e272e",
textColor2: "#1e272e"
};
export const themeSlice = createSlice({
name: "theme",
initialState: { value: darkMode },
reducers: {
enableDarkMode: (state, action) => {
state.value = darkMode;
},
enableLightMode: (state, action) => {
state.value = lightMode;
}
}
});
export const { enableDarkMode, enableLightMode } = themeSlice.actions;
export default themeSlice.reducer;

我在组件中使用主题，方法是在父组件中调用const theme = useSelector((state) => state.theme.value);，并将其作为道具传递给子组件。

我的问题是；正确的"；方法我开始阅读有关context的文章，我想知道使用它而不是state是否更合适？此外，我应该在父组件中调用useSelector并将值作为道具传递给子组件，还是应该在每个需要访问状态一部分的子组件中使用useSelector？

谢谢。

Answer 1

如果您使用redux，则存储中的状态是全局的，因此您可以在任何子级或父级中调用它，因此您不必在父级中进行调用并通过props传递它。props：如果你在父组件中有一个状态，而你只需要在子组件中有它，那么用props 传递它

如果在多个组件中需要状态，而这些组件不可能或不可能通过props传递，请使用redux或上下文api或任何golbal状态管理器