react context上下文使用

2021-09-12 07:42:50 字數 1036 閱讀 5113

首先介紹下什麼是上下文以及為什麼要使用上下文,react狀態一般情況是由父元件通過props向子元件傳遞的,那麼如果出現巢狀比較深的元件,並且只是最後乙個子元件需要使用頂層元件的狀態這樣一級級傳遞會顯得麻煩而且不好維護,上下文的作用是在當前元件宣告乙個公共的狀態,不需要通過props的傳遞,子元件需要的時候去公共裡面取可以,下面來講解下具體使用方法。

這裡建立乙個頂層元件./provider.js

import react,

from

'react'

;import proptypes from

'prop-types'

;class

provider

extends

component

getchildcontext()

;}render()

}provider.childcontexttypes =

export

default provider;

注意步驟1和步驟2為固定格式,一定不要寫錯

子元件./controlpanel.js

import react,

from

'react'

;import proptypes from

'prop-types'

;class

controlpanel

extends

component

=this

.context;

return

(<

/h1>);

}}controlpanel.contexttypes =

export

default controlpanel;

子元件寫法格式也是固定的,給當前類賦值contexttypes屬性,然後this.context就可以拿到上下文了。

react的上下文可以大大簡化這種非必要的屬性傳遞過程,不過寫法較為複雜,具體是否需要使用看實際場景。

react context上下文的使用

react 中,資料是通過 props 屬性自上而下 由父及子 進行傳遞的,但這種做法對於某些型別的屬性而言是極其繁瑣的。context 設計目的是為了共享那些對於乙個元件樹而言是 全域性 的資料。context 可以讓我們無須明確地傳遍每乙個元件,就能將值深入傳遞進元件樹。為當前的 theme 建...

上下文 上下文棧

全域性 函式 區域性 在執行全域性 前將window確定為全域性執行上下文 對全域性資料進行預處理 var定義的全域性變數 undefined,新增為window的屬性 function宣告的全域性函式 賦值 fun 新增為window的方法 this 賦值 window 開始執行全域性 在呼叫函式...

中斷上下文 程序上下文

在學習與作業系統相關的知識時候,我們經常遇到程序上下文 中斷上下文,看似熟悉又感覺不是特別清晰。這裡我們從如下幾個方面進行描述。上下文是從英文中context翻譯過來的,指的是一種環境。上下文我們看起來不怎麼熟悉,但是我們可以看context的中文翻譯,或者我們能更加的情形些。context n 語...