React基础篇（四）：Context API

一、什么是Context API

① Context API解决的是一个组件间通信的问题，有一些全局的状态我们需要多个组件都去使用，但是组件如果都是一层层传递会非常麻烦，所以我们可以使用Context API来避免这种层层传递，实现跨层使用state。

② 在Context API中，节点有两种类型：provider和consumer。provider就是提供状态的那个组件，consumer是使用状态的那个组件。

③ 我们要实现Context API通信，必须把consumer包含在provider层级之下，否则consumer只能获取到初始状态，监听不到状态的改变和实现UI的更新。

二、使用Context API

①简单的 content、provider和consumer

//① 定义Context，light是初始状态值
const Context = React.createContext('light')
//② 指定provider
class Provide extends React.Component {
   
    render() {
   
        return (
            //这个Context.provider返回的是一个组件
            //把这个要用state的Consumer组件用Context.provider包裹起来，Consumer组件才可以访问value
        	<Context.provider value = "dark">
            	<Consumer />
            </Context.provider>
        )
    }
}
//③ 指定consumer 
function Consumer