流媒体网站开发,口碑好的扬州网站建设,做交互的网站,长沙58同城招聘网找工作招聘信息官方文档写道#xff1a;在组件的顶层调用 useContext 来读取和订阅 context。
我理解就是一个“全局变量”的概念。它可以用来声明一个变量#xff0c;然后在各个组件中使用#xff0c;避免了props一级一级往下传#xff0c;当然使用场景有限#xff0c;比如设置一个主题…官方文档写道在组件的顶层调用 useContext 来读取和订阅 context。
我理解就是一个“全局变量”的概念。它可以用来声明一个变量然后在各个组件中使用避免了props一级一级往下传当然使用场景有限比如设置一个主题背景色按钮样式定制…这种可以使用。
代码示例
import { createContext } from react// 创建一个Context对象它本身不包含任何信息它只代表你可以提供或从组件中读取的信息类型
// red 是默认值 当没有Provider组件时会使用这个默认值
const { Provider, Consumer } createContext(red)function ContextDemo() {return (/* Provider组件 将当前的value传递给以下组件如果value不写默认是undefined*/Provider value{pink}Toolbar //Provider)
}function Toolbar() {return ThemedButton /
}function ThemedButton() {/* Consumer消费组件 可以订阅到value的改变此处的theme就是往上查找最近的Provider组件提供的value值*/return Consumer{theme button style{{ background: theme }}按钮颜色:{theme}/button}/Consumer}export default ContextDemo个人学习笔记
