三、context的應用場景
四、context的缺點
在乙個典型的 react 應用中，資料是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，ui 主題），這些屬性是應用程式中許多元件都需要的。context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 props。
context 提供了乙個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。作用：用於在react元件樹中自上而下地傳遞資料
建立乙個 context 物件。
const themecontext = react.
createcontext
()
生產者,用於生產共享資料的地方, 在value中放置需要共享的資料
>
"box1"
>
<
/div>
"box2"
>
="/*" to=
"/"/
>
<
/switch>
<
/div>
<
/themecontext.provider>
1、每個 context 物件都會返回乙個 provider react 元件，它允許消費元件訂閱 context 的變化。2、provider 接收乙個 value 屬性，傳遞給消費元件。
3、當 provider 的 value 值發生變化時，它內部的所有消費元件都會重新渲染。
消費者,專門消費生產者提供的資料
}>
測試上下文<
/h1>
<
/div>)}
<
/themecontext.consumer>
這需要函式作為子元素（function as a child）這種做法。這個函式接收當前的 context 值，返回乙個 react 節點。傳遞給函式的 value 值等同於往上元件樹離這個 context 最近的 provider 提供的 value 值。如果沒有對應的 provider，value 引數等同於傳遞給 createcontext() 的 defaultvalue。
掛載在 class 上的 contexttype 屬性會被重賦值為乙個由 react.createcontext() 建立的 context 物件。這能讓你使用 this.context 來消費最近 context 上的那個值。你可以在任何生命週期中訪問到它，包括 render 函式中。
//使用上下文資料的第一種寫法
class
testcontext
extends
react.component
}>
測試上下文<
/h1>
<
/div>)}
}//把上下文物件新增到當前的react類上，在當前類中使用this.context 就可以訪問傳遞下來的資料了
testcontext.contexttype = themecontext
export
default testcontext
//使用上下文資料的第二種寫法
export
default
class
testcontext
extends
react.component
}>
測試上下文<
/h1>
<
/div>)}
<
/themecontext.consumer>)}
}
可以通過給當前的上下文物件設定乙個名字,便於在devtoolszhong中檢視除錯
const globalcontext = react.
createcontext()
;globalcontext.displayname =
'mydisplayname'
;// "mydisplayname.provider" 在 devtools 中
// "mydisplayname.consumer" 在 devtools 中
1、主題切換
import react from
"react"
//建立react上下文
const themecontext = react.
createcontext()
const themes =
, dark:
}export
//任何乙個es6模組中，最多只能有乙個export default
export
default themecontext
3、react-router使用context
4、react-redux使用contxt
5、跨層級元件傳參
context使用場景還有很多哦!
因為 context 會使用參考標識（reference identity）來決定何時進行渲染，這裡可能會有一些陷阱，當 provider 的父元件進行重渲染時，可能會在 consumers 元件中觸發意外的渲染。
React高階指引 Context
context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 props。context 設計目的是為了共享那些對於乙個元件樹而言是 全域性 的資料，例如當前認證的使用者 主題或首選語言。舉個例子，在下面的 中，我們通過乙個 theme 屬性手動調整乙個按鈕元件的樣式 使用...
React 使用Context傳遞引數
extends react component extends react component extends react component props themedbutton props theme consumer 當provider發生資料變更時，會觸發到 consumer 發生渲染，所有...
react中context傳遞資料
在乙個典型的 react 應用中，資料是通過 props 屬性自上而下 由父及子 進行傳遞的，但這種做法對於某些型別的屬性而言是極其繁瑣的 例如 地區偏好，ui 主題 這些屬性是應用程式中許多元件都需要的。context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 pro...