以往的是这么玩的：

import React from 'react'
const ctx = React.createContext();
function Test(){
    return <ctx.Consumer>
        {value=><h1>Test,上下文的值: {value}</h1>}
    </ctx.Consumer>
}
export default function App() {
    return (
        <div>
            <ctx.Provider value="wjw">
                <Test />
            </ctx.Provider>
        </div>
    )
}

但是react认为，这样多了两个元素—Context.Provider, Context.Consumer, 增加了层次结构，比较麻烦
要尽量保证组件结构的洁净，因此衍生出了useContext

useContext

用于获取上下文的—>>组件间的数据传递
现在是这样的代码：

import React,{ useContext } from 'react';
const ctx = React.createContext();//Context对象
function Test(){
    const value = useContext(ctx);
    return <h1>Test,上下文的值: {value}</h1>
}
export default function App() {
    return (
        <div>
            <ctx.Provider value="wjw">
                <Test />
            </ctx.Provider>
        </div>
    )
}

这样就减少了一个Context.Consumer，而且可以随时获取其他上下文的值