React Hooks useContext如何使用？

新版的react引入了hooks，全新的react版本完全拥抱函数式编程，全新的钩子机制hooks也系数亮相，帮助react开发摆脱掉繁琐的class声明和生命周期钩子函数的逻辑调用，极大的提升了开发效率和维护难度。接下来我会分几个篇幅来一一剖析hooks的钩子函数，让我们一起来学习全新的react吧！

今天我们的主角是useContext，顾名思义就是context（上下文），这是react机制里经常用到的特性，全局属性的访问和通信，让我们来一起看看它的使用场景和注意事项吧。

1.react创建上下文

const TestContext = React.createContext()

function Parent() {
    return <TestContext.Provider value={'test context'}></TestContext.Provider>
}

TestContext.Provider的props必需是value，否则就会报错

function Child() {
    return <TestContext.Consumer>value => <div>I am {value}}</div></TestContext.Consumer>
}

function App() {
    return <Parent>
        <Child />
    </Parent>
}

2.useContext创建上下文

const TestContext = React.createContext() 

function Parent() {
    return <TestContext.Provider value={'test context'}></TestContext.Provider>
}

function Child() {
    const value = useContext(TestContext)
    return <div>I am {value}</div>
}

使用最新的useContext只需要把创建的上下文对象当做入参传入，即可拿到provider传入的value值，省去了consumer的创建和定义。

3.多层嵌套context

如下是一个嵌套的context，正常情况下需要这样书写：

function Child() {
    return <TestContext.Consumer>
        user => {
            <div>{user.age}</div>
            {
                user.name ? <TestContext.Consumer>name => <div>{name}</div></TestContext.Consumer> : null
            }
            
        }
    </TestContext.Consumer>
}

使用useContext

function Child() {
    const user = useContext(UserContext)
    const name = useContext(NameContext)
    
    return <div>
        {user.age}
        {
            user.name ? <div>{name}</div> : null
        }
    </div>
}

以上就是useContext的使用方法和基本注意事项，有不足之处欢迎指出。