Context

class 组件

创建context

const ThemeContext=React.createContext()//括号里面是默认值

const ThemeProvider=ThemeContext.Provider
const ThemeConsumer=ThemeContext.Consumer

使用context

 <ThemeProvider value={color:'red'}>
   <HomePage/>
</themeProvider>

<ThemeConsumer>
//通过回调获取值
 {value=><div>{value.color}</div>}
</ThemeConsumer>

获取context class组件要在外部设置contextType

  const {themecolor}=this.context
  HomePage.contextType=ThemeContext

函数组件 在组件内部使用useContext

const Userpage=function(){
const ctx=useContext(ThemeContext)
return(
 <div>
 </div>
)
}

总结 （三种使用context方法） Class.ContextType只能用在类组件上；只能订阅单一context后面会覆盖前面

Context.Consumer嵌套复杂

在文件export context 通过import导入相关context使用

使用context和全局变量的区别 全局变量不可修改

使用context时 context对象变化时 组件会进行重新渲染