React context 實現元件聯動功能

2021-10-04 01:40:05 字數 782 閱讀 2479

我們知道react context 已經出現有一段時間了並且隨著hook的盛行,我們更多的發掘出了context的價值。

context是可以像redux一樣用來管理狀態,不知道你有沒有像我一樣有這個疑問,那既然redux就可以管理狀態,為什麼要使用context呢?

現在我的理解呢是由於context api不像redux那樣依賴很多第三方庫。但是並不是說context就可以代替redux的。

那你可能又好奇了:什麼時候用context?什麼時候使用reudx呢?

一般情況下,如果狀態不需要經常update的我們可以使用context,比如像語言切換,主題切換,許可權驗證等,如果狀態高頻率updata,那麼context不是乙個很好的解決方案,因為每次的updata,都要重新渲染,這個時候我們可以使用redux。

下面就用一段簡單的**實現元件之間的聯動

廢話不多說,附上**是王道。

import react,  from 'react'

const elements = createcontext()

const child1 = () =>

setcount(prevstate => prevstate + 1)}>

button1

)}const child2 = () =>

setcount(prevstate => prevstate + 2)}>

button2

)}const initialstate = usestate(0)

return (

)}

新版 react context的寫法

祖元件 import react,from react import cnode from components cnode type propstype type statetype 這裡要匯出這個上下文,下面的子孫元件哪個用到context的東西哪個就引入一下 export const info...

React Context 理解和使用

如果發現文章有問題也可以在文章下方及時聯絡筆者哦,相互 一起進步 const context react.createcontext defaultvalue function contextprovider 但是如果沒有對應的context.provider相匹配,那麼元件樹上的所有元件都可以收到...

React Context和高階元件HOC用法

本文將通過官方例項,組合運用context和高階元件,並給出例項 的方式詳細介紹context 高階元件的概念和用法。在典型的react應用中,資料是通過props屬性一層層的由上向下傳遞。但是對於應用中很多元件都需要使用的值 比如說 頁面的主題,頁面語言選擇 如果還是通過props屬性一層層的傳遞...