React Context 实现公共状态管理

一、背景：对公共状态进行管理

二、使用

1. 创建CreateContext对象
2. 父组件使用CreateContext对象.Provider对子组件进行包裹，value进行赋值
3. 子组件引入CreateContext对象，

• 1、如子类组件名.contextType = ThemeContext;（类组件）2、赋值this.context.buttonType
  

• 如<CreateContext对象.Consumer>标签包裹，value进行赋值;(函数组件)
  

三、关键代码

theme.tsx文件
    import React from "react" 

export interface ThemeType {
    buttonType: string
}

const ThemeContextDefautltValue = {
    buttonType: 'default'
}
export const ThemeContext =  React.createContext(ThemeContextDefautltValue)

父组件
import { ThemeContext, ThemeType } from "context/theme"

render(){
    return (
         <ThemeContext.Provider value={theme}>
             <ProductCard />
         </ThemeContext.Provider>
    )
}

子类组件
import { ThemeContext } from 'context/theme';

ProductCard.contextType = ThemeContext;

render(){
    return (
           <Button type={this.context.buttonType} >按钮</Button>
    )
}


子函数组件
<ThemeContext.Consumer>
( (value)=> {
     <Button type={value} >按钮</Button>
})

</ThemeContext.Consumer>