一、useContext
(一)useContext的应用场景:
我的理解适合两种场景:
1.全局状态的定义,即可以被不同层级的组件所需要。
2.多个组件之间传参(他们之间可能是跨多层级即祖孙关系传参)时。
如果普通的父子组件之间传参,即父子组只有单纯的一层时,用props传参更省事,useContext反而不是最佳的选择,官方也是这样推荐的(建议用组合组件来完成传参)。
(二)useContext的用法:
步骤一:上层组件树去用 <MyContext.Provider>
定义为下层组件需要的context(上下文,你可能理解为参数state);
const MyContext = React.createContext(defaultValue);
<MyContext.Provider value={/* 某个值 */}>
示例:
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
注意:React.createContext(null)的初始参数可以为空,这个初始值测试时才有意义。
步骤二:下层组件中用useContext(MyContext)去声明需要订阅上层组件的context的变化;
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button> );
}
二、父子组件props传参法:
对于函数组件,一样可以实现用父子组件props来完成传参,特别是对于简单的只有一层的父子组件之间传参,我个人更喜欢采用props来传参。
示例:
父组件的定义:
子组件的定义: