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