context被翻譯為上下文，在程式設計領域，這是乙個經常會接觸到的概念，react中也有。
在react的官方文件中，context
不過，這並非意味著我們不需要關注context。事實上，很多優秀的react元件都通過context來完成自己的功能，比如react-redux的，就是通過context提供乙個全域性態的store，拖拽元件react-dnd，通過context在元件中分發dom的drag和drop事件，路由元件react-router通過context管理路由狀態等等。在react元件開發中，如果用好context，可以讓你的元件變得強大，而且靈活。
簡單說就是，當你不想在元件樹中通過逐層傳遞props或者state的方式來傳遞資料時，可以使用context來實現跨層級的元件資料傳遞。
使用context，可以跨越元件進行資料傳遞。
對於父元件，也就是context生產者，需要通過乙個靜態屬性childcontexttypes宣告提供給子元件的context物件的屬性，並實現乙個例項getchildcontext方法，返回乙個代表context的純物件 (plain object) 。
而對於context的消費者，通過如下方式訪問父元件提供的context。
子元件需要通過乙個靜態屬性contexttypes宣告後，才能訪問父元件context物件的屬性，否則，即使屬性名沒寫錯，拿到的物件也是undefined。
對於無狀態子元件(stateless component)，可以通過如下方式訪問父元件的context
通過靜態方法react.createcontext()建立乙個context物件，這個context物件包含兩個元件，和。
實際上，除了例項的context屬性(this.context)，react元件還有很多個地方可以直接訪問父元件提供的context。比如構造方法：
比如生命週期：
對於面向函式的無狀態元件，可以通過函式的引數直接訪問元件的context。
const statelesscomponent = (props, context) => (
......
)
通過context暴露資料或者api不是一種優雅的實踐方案，儘管react-redux是這麼幹的。因此需要一種機制，或者說約束，去降低不必要的影響。
通過childcontexttypes和contexttypes這兩個靜態屬性的約束，可以在一定程度保障，只有元件自身，或者是與元件相關的其他子元件才可以隨心所欲的訪問context的屬性，無論是資料還是函式。因為只有元件自身或者相關的子元件可以清楚它能訪問context哪些屬性，而相對於那些與元件無關的其他元件，無論是內部或者外部的 ，由於不清楚父元件鏈上各父元件的childcontexttypes「宣告」了哪些context屬性，所以沒法通過contexttypes「申請」相關的屬性。所以我理解為，給元件的作用域context「帶許可權」，可以在一定程度上確保context的可控性和影響範圍。
在開發元件過程中，我們應該時刻關注這一點，不要隨意的使用context。
export function createprovider(storekey = 'store', subkey) subscription`
class provider extends component
}constructor(props, context)
render()
}// ......
provider.proptypes =
provider.childcontexttypes =
return provider
}export default createprovider()
react中Context的使用
context 提供了乙個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。props單向資料流動 如果覺得props傳遞資料很繁瑣，可以採用context,進行跨元件傳遞資料 例如給子代元素傳遞一筆錢 手動新增狗頭 為了後續使用方便，封裝乙個元件 import from rea...
React 的context操作指南
context的用途 context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 props。react.createcontext const mycontext react.createcontext defaultvalue context.provider cla...
react中Context的使用
context 提供了乙個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。props單向資料流動 如果覺得props傳遞資料很繁瑣，可以採用context,進行跨元件傳遞資料 例如給子代元素傳遞一筆錢 手動新增狗頭 為了後續使用方便，封裝乙個元件 import from rea...