React函数式Hooks-useContext()用法

函数组件接收createContext传递的值，如不了解createContext可阅读react 创建上下文（createContext）使用（超详细）

例子如下：

import React, { Component, createContext, useState, useContext } from 'react'
const CountContext = createContext()
//之前获取数据的两种方式
//第一种
class TwoHook extends Component {
    render() {
        return (
            <CountContext.Consumer>
                {count => <div>{count}</div>}
            </CountContext.Consumer>
        )
    }
}
// 第二种
class TwoHook2 extends Component {
    static contextType = CountContext
    render() {
        const count = this.context
        return (
            <div>{count}</div>
        )
    }
}

//第三种useContext  
function TwoHook3() {
    const count = useContext(CountContext)
    return <div>{count}</div>
}

function UseContextDemo() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <CountContext.Provider value={count}>
                <button onClick={
                    () => {
                        setCount(count + 1)
                    }

                }>hooks</button>
                <TwoHook />
                <TwoHook2 />
                <TwoHook3 />
            </CountContext.Provider>
        </div >
    )
}
export default UseContextDemo