学习ReactHooks--useContext

useContext的作用就是对它所包含的组件树提供全局共享数据的一种技术。

在用类生命组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法（Function）来声明组件，已经没有了constructor构造函数，也就没有了props的接收，那父子组件之间的传值也就成了一个问题。React Hooks为我们准备了useContext。

useContext其实总共分两步：
1.createContext函数创建context
2.useContext接收上下文变量

1.createContext函数创建context\

import React, { useState , createContext } from 'react';
//===关键代码
const CountContext = createContext()

function Example4(){
    const [ count , setCount ] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            {/*======关键代码 */}
            <CountContext.Provider value={count}>
			    <Counter />
			</CountContext.Provider>

        </div>
    )
}
export default Example4;

2.useContext接收上下文变量

import React, { useState , createContext , useContext } from 'react';
function Counter(){
    const count = useContext(CountContext)  
    return (<h2>{count}</h2>)
}