React-Context

/**
API: 
1 createContext(defaultValue?):：创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据
const {Provider, Consumer} = React.createContext(defaultValue);

2 Provider(生产者): 和他的名字一样。用于生产共享数据的地方。生产什么呢？ 那就看value定义的是什么了。value:放置共享的数据。
<Provider value={共享的数据}>
    里面可以渲染对应的内容
</Provider>

3 Consumer(消费者):这个可以理解为消费者。 他是专门消费供应商(Provider 上面提到的)产生数据。Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue
 <Consumer>
  {value => 根据上下文  进行渲染相应内容}
 </Consumer>
*/

import { Component,createContext } from 'react'
//import { View, Text,Button } from '@tarojs/components'

const BatteryContext = createContext();//如果有参数，则参数为默认值
const OnlineContext = createContext(true);

class Leaf extends Component{
    render(){
        return (
            /**Consumer也是要嵌套，注意参数 
             * Consumer消费者使用Context的值
             * 但子组件不能是其他组件，必须渲染一个函数，函数的参数就是Context的值
             * 当出现多个Consumer时，进行嵌套，每个Consumer的子组件必须是一个函数
            */
            <BatteryContext.Consumer>
                {
                    battery => (
                    <OnlineContext.Consumer>
                    {
                        online => <h1>Battery:{battery},Online:{String(online)}这里有个坑，boolean渲染不出来，要转为string</h1>
                    }
                    </OnlineContext.Consumer>)
                }
            </BatteryContext.Consumer>
        )
    }
}
class Middle extends Component{
    render(){
        return <Leaf/>
    }
}

export default class Index extends Component {
      state = {
        battery:100,
        online:true,
      }
  render () {
    const {battery,online} = this.state;
    return (
        /*有多个Context时，直接嵌套，顺序不重要*/
        <BatteryContext.Provider value={battery}>
        <OnlineContext.Provider value={online}>
        <Middle/>
        <Button onClick={()=>this.setState({battery:battery-1})}>
            Button
        </Button>
        <Button onClick={()=>this.setState({online:!online})}>
            Online
        </Button>
        </OnlineContext.Provider>
        </BatteryContext.Provider>
    )
  }
}