五、useContext的使用

一、在计数器案例引入createContext函数

引入createContext函数，并使用得到一个组件，然后在return方法中使用，代码如下

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

function App(){
    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}>
            </CountContext.Provider>
        </div>
    )
}

export default App;

这段代码就相当于把count变量允许跨层级实现传递和使用了（也就是实现了上下文），当父组件的count变量发生变化时，子组件也会发生变化。接下来我们就看看一个React Hooks的组件如何接收到这个变量。

二、useContext接受上下文变量

直接使用useContext接收

import React, { useState , createContext , useContext  } from 'react';

function Counter(){
	const count = useContext(CountContext) //得到count
	return (<h2>{count}</h2>)
}

const CountContext = createContext()

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

    return (
        <div>
            <p>你点击了{count} 次</p>
            <button onClick={()=>{setCount(count+1)}}>点击</button>
            <CountContext.Provider value={count}>
            	{/*======引入子组件*/}
            	<Counter />
            </CountContext.Provider>
        </div>
    )
}
export default App;

这样Counter组件就能接收到父组件传递过来的值了。
其中运用useContext接收一个context对象（createContext的返回值）并返回context的当前值，当前的context值为父组件中距离当前组件最近的<CountContext.Provider >的value属性值决定的。
流程：点击按钮---->count发生改变---->传递给子组件Counter---->子组件渲染