在react裡,元件間的資料主要是靠props來傳遞,然而,當元件越來越多的時候,這樣的傳遞就會過於複雜,這時候就可以利用context來分享資料。在Routing 裡,我們介紹了ThemeProvider,其實,ThemeProvider就是利用context。當然,也可以使用更複雜的Redux/Recoil來達成這樣的效果,不過,多數的情況下,Context就能解決問題了。

產生Context

套用Context

取得Context

子元件更動Context

Context物件

小組作業

常見問題

Q: 當我重整頁面的時候,Context內容會消失,要怎麼不讓內容消失?

A: 對,因為是儲存在記憶體裡,刷新就會消失。如果要儲存起來,可以傳到伺服器端利用session暫存,或利用localStorage或sessionStorage儲存在瀏覽器。