React Context and useContext使用指南

【中文官網文檔】

Context 提供了一個無需為每層組件手動添加 props,就能在組件樹間進行數據傳遞的方法。

在一個典型的 React 應用中,數據是通過 props 屬性自上而下(由父及子)進行傳遞的,但這種做法對于某些類型的屬性而言是極其繁瑣的(例如:地區偏好,UI 主題),這些屬性是應用程序中許多組件都需要的。Context 提供了一種在組件之間共享此類值的方式,而不必顯式地通過組件樹的逐層傳遞 props。

如果你學過angularjs 那么可以理解為是:$rootScope。


簡述重點

1.Context

Context 通過組件樹提供了一個傳遞數據的方法,從而避免了在每一個層級手動的傳遞 props 屬性。
有部分小伙伴應該使用props屬性進行組件向下傳值的操作。當多個組件嵌套時候。你就需要慢慢向上尋找最初的值是什么!

2.API (個人大白話理解)

React.createContext:創建一個上下文的容器(組件), defaultValue可以設置共享的默認數據

const {Provider, Consumer} = React.createContext(defaultValue);  

Provider(生產者): 和他的名字一樣。用于生產共享數據的地方。生產什么呢? 那就看value定義的是什么了。value:放置共享的數據。

<Provider value={/*共享的數據*/}>  
    /*里面可以渲染對應的內容*/
</Provider>  

Consumer(消費者):這個可以理解為消費者。 他是專門消費供應商(Provider 上面提到的)產生數據。Consumer需要嵌套在生產者下面。才能通過回調的方式拿到共享的數據源。當然也可以單獨使用,那就只能消費到上文提到的defaultValue

<Consumer>  
  {value => /*根據上下文  進行渲染相應內容*/}
</Consumer>  

hook useContext()

hook函數是React 16.8后新推出的特性,可以取代class的寫法。

版本要求 react > 16.8

步驟 1.創建Context
2.使用MyContext.Provider提供value
3.使用useContext(MyContext)獲得數值value

//MainPage.js
import React from 'react'  
import ChildPage from './ChildPage'  
export const MyContext = React.createContext();  
function MainPage(){  
    return (
        <div>
            <MyContext.Provider value ='Hello world'>
                 <ChildPage />
            </MyContext.Provider>
        </div>
    )
}
export default MainPage;

//ChildPage.js
import React from 'react'  
import {MyContext} from './MainPage'  
function ChildPage(){  
    return (
        <p>{useContext(MyContext)}</p>
    )
}
export default ChildPage;  

易錯點 useContext是新增的Hook函數,目前版本(16.8)里只能在function函數體內使用,不要在class組件內使用,也不要在條件語句內使用

Context需要在多個文件中傳遞數據,所以要在定義Context的地方加入export,在需要使用數據地方import進來,注意import的時候一定要加上花括號{MyContext}(原因請關注默認export和命名export的區別)

不要在一個文件中provider提供完數據后,馬上useContext消費數據,可能會取不到值。

[本文部分內容來自互聯網]




481泳坛夺金玩法