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的使用方法和基本注意事项，有不足之处欢迎指出。