React元件傳值

2022-02-28 11:08:01 字數 2470 閱讀 4719

react的單向資料流與元件間的溝通。

首先,我認為使用react的最大好處在於:功能元件化,遵守前端可維護的原則。

先介紹單向資料流吧。

react單向資料流:

react是單向資料流,資料主要從父節點傳遞到子節點(通過props)。

如果頂層(父級)的某個props改變了,react會重渲染所有的子節點。

剛才我們提到了props,怎麼理解props呢?

props

props是property的縮寫,可以理解為html標籤的attribute。

不可以使用this.props直接修改props,因為props是唯讀的,props是用於整個元件樹中傳遞資料和配置。

在當前元件訪問props,使用this.props

這裡貼出props使用**:

* data 為乙個模擬資料,無具體意義,僅供舉例使用。

接下來說說state

state:

每個元件都有屬於自己的statestateprops的區別在於前者(state)只存在於元件內部,只能從當前元件呼叫this.setstate修改state值(不可以直接修改this.state!)。

一般我們更新子元件都是通過改變state值,更新新子元件的props值從而達到更新。

我們舉個例項吧:

這裡使用getinitialstate來初始化state,例子裡面state是text,然後通過this.state.text讀取state值

props與state:

盡可能使用props當做資料來源,state用來存放狀態值(簡單的資料)。

也就是說咱們通常用props傳遞大量資料,state用於存放元件內部一些簡單的定義資料。(需要通過大量運用react可以感受這點)

那麼,單向資料流的原理及一些概念咱麼說完了,接下來咱們看看元件間是怎麼進行溝通的:

一般來說,有兩種溝通方式:

一、父子元件溝通

在react中,最為常見的元件溝通也就是父子了,一般情況是:

* 父元件更新元件狀態  -----props-----> 子元件更新

另一種情況是:

* 子元件更新父元件狀態   -----需要父元件傳遞**函式----->  子元件呼叫觸發

是這樣的,一般情況下,只能由父元件通過props傳遞資料給子元件,使得子元件得到更新,那麼現在,我們想實現

子元件更新父元件就需要 父元件通過props傳遞乙個**函式到子元件中,這個**函式可以更新父元件,子元件就是

通過觸發這個**函式,從而使父元件得到更新。(類似於一種取巧的做法)

這裡貼出 子元件更新父元件 **:

在這個例子中,refreshbox是父元件建立的乙個**函式,將其傳入son元件中,然後通過son元件進行呼叫觸發,

進而改變state,實現子元件對父元件的更新。

二、兄弟元件溝通

當兩個元件處於同一級時(同處父級,或者同處子級),就稱為兄弟元件。

這裡有兩種實現方式:

方式一:

按照react單向資料流方式,我們需要借助父元件進行傳遞,通過父元件**函式改變兄弟元件的props

其實這種實現方式與子元件更新父元件狀態的方式是大同小異的。

方式二:

方式乙隻適用於元件層次很少的情況,當元件層次很深的時候,整個溝通的效率就會變得很低

在這裡,react官方給我們提供了一種上下文方式,可以讓子元件直接訪問祖先的資料或函式,無需從祖先元件一層層地傳遞資料到子元件中。

但這種方法建議按需使用,可能會導致一些不可預期的錯誤。(比如資料傳遞邏輯結構不清晰)

在這裡直接貼出例子:

首先要對使用物件進行說明,box.childcontexttype就是這樣乙個上下文宣告,子元件呼叫祖先元件的方法時,

通過 this.context.[callback] 這樣就可以進行祖先與子元件間的溝通了。

三、巢狀層級較多的時候

推薦使用 狀態管理

React元件傳值

父元件向子元件傳值 通過父元件的props屬性向子元件傳值 子元件 children.js import react,from react export default class children extends component render 父元件 parent.js import reac...

react 元件傳值

通過props實現 父元件parent import react from react import child from children class comment extends react.component render export default comment 子元件children...

react 元件傳值

react 元件傳值與vue 類似,比vue更加簡單,省去了註冊的步驟,直接利用標籤就可傳值 父元件 給 子元件傳值 如下 react元件傳值 父傳子 頁面效果 如下,父元件 的狀態中,也就是state 中 有屬性 御劍飛行,穿牆術,亢龍有悔。子元件state為空,通過 父元件 給 子元件傳值,獲取...