useContext 讓父子元件傳值更簡單(五)

2022-06-28 21:21:11 字數 2131 閱讀 2335

有了usestateuseeffect已經可以實現大部分的業務邏輯了,但是react hooks中還是有很多好用的hooks函式的,比如usecontextusereducer

在用類宣告元件時,父子元件的傳值是通過元件屬性和props進行的,那現在使用方法(function)來宣告元件,已經沒有了constructor建構函式也就沒有了props的接收,那父子元件的傳值就成了乙個問題。react hooks為我們準備了usecontext。這節課就學習一下usecontext,它可以幫助我們跨越元件層級直接傳遞變數,實現共享。需要注意的是usecontextredux的作用是不同的,乙個解決的是元件之間值傳遞的問題,乙個是應用中統一管理狀態的問題,但通過和usereducer的配合使用,可以實現類似redux的作用。

這就好比玩遊戲時有很多英雄,英雄的最總目的都是贏得比賽,但是作用不同,有負責輸出的,有負責抗傷害的,有負責**的。

context的作用就是對它所包含的元件樹提供全域性共享資料的一種技術。

直接在src目錄下新建乙個檔案example4.js,然後拷貝example.js裡的**,並進行修改,刪除路由部分和***的**,只留計數器的核心**就可以了。

import react,  from 'react';

function example4() times

}>click me

)}export default example4;

然後修改一下index.js讓它渲染這個example4.js元件,修改的**如下。

import react from 'react';

import reactdom from 'react-dom';

import example from './example4'

reactdom.render(, document.getelementbyid('root'));

之後在example4.js中引入createcontext函式,並使用得到乙個元件,然後在return方法中進行使用。先看**,然後我再解釋。

import react,  from 'react';

//===關鍵**

const countcontext = createcontext()

function example4() times

}>click me

)}export default example4;

這段**就相當於把count變數允許跨層級實現傳遞和使用了(也就是實現了上下文),當父元件的count變數發生變化時,子元件也會發生變化。接下來我們就看看乙個react hooks的元件如何接收到這個變數。

已經有了上下文變數,剩下的就時如何接收了,接收這個直接使用usecontext就可以,但是在使用前需要新進行引入usecontext(不引入是沒辦法使用的)。

import react,  from 'react';

引入後寫乙個counter元件,只是顯示上下文中的count變數**如下:

function counter()

得到後就可以顯示出來了,但是要記得在的閉合標籤中,**如下。

其實usecontext的用法比以前時簡單很多,既然簡單,就沒必要講解的那麼難,希望小夥伴這節課都能get到知識點,完善自己的知識體系。

**:

父子元件通訊

子元件向父元件傳遞this emit 子元件向父元件傳遞事件並攜帶引數子元件 向父元件傳遞事件todetail並傳遞引數res this emit todetail res 父元件 監聽事件並輸出引數 todetails child comp 父元件呼叫子元件中方法 ref 用於給元素 子元件註冊引...

VUE父子元件

父頁面 actiondetail msg 子頁面呼叫父頁面的方法 this.emit parentaction 我想說的話 我是父元件 我是子元件 父元件對我說 父元件通過 prop 給子元件下發資料,子元件通過 emit觸發事件給父元件傳送訊息 1.this.children用來訪問子元件例項,要...

4 父子元件

import react from react import reactdom from react dom 在vue中 父傳子 其實就是通過自定義屬性 子元件通過props接收 子傳父 其實就是通過自定義事件 子元件通過 emit觸發父元件定義的事件 並且把子元件的資料 通過引數的方式給了父元件 ...