理解：

一种组件间通信方式，用于祖组件和后代组件之间的通信

1.使用Context

2.创建Context容器对象

1	const xxxContext = React.createContext(defaultValue)

3.渲染子组件，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据

1 2	<xxxContext.Provider value={数据}> </xxxContext.Provider>

4.后代组件读取数据
第一种适用于类组件：

1 2	static contextType = xxxContext;//声明接收context this.context//context是一个对象，读取context中value的值

第二种函数组件和类组件都可以：

<xxxContext.Consumer>
    {
    	value=>(//value是context中的value数据
    		要显示的内容
    	)
    
	}
</xxxContext.Consumer>

例子：

const ThemeContext = React.createContext({
    value:"blue"
})
class A extends React.Component {
    constructor(props){
        super(props)
        this.state={value:"red"}
    }
    render(){
        return(
            <ThemeContext.Provider value={this.state}>
            	<B/>
            </ThemeContext.Provider>
        )
    }
}
function B(){
    return(
        <div>
        	<C/>
        </div>
    )
}
function C(){
    return (
        <ThemeContext.Consumer>
        {({value})=>(
        	<h1>{value}</h1>
    	)}
        </ThemeContext.Consumer>
        
    )
}

context一般用于封装react插件

使用useContext

1	const value = useContext(MyContext)

接收一个context对象（React.createContext的返回值）并返回该context的当前值，当前的context值由上层㢟中距离当前组件最近的<MyContext.Provider>的value prop角色

当组件上层最近的<MyContext.Provider>更新时，该Hook会触发重渲染，使用最新传递给MyContext provider的context value值。

useContext(MyContext)相当于static contextType=MyContext或者<MyContext.Consumer>

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。