iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 7

Day 7 寫一下context

useContext

今天來説說useContext,這個東西可以做成破產版的redux ,主要功能是建立一個global的樹避免產生一個'Props Hell'

先用一段簡單的code

// 我是寫了一個空物件,但其實這是預設值,寫什麼都可以,當<Provider value={} />
// 沒有assign value時會預設使用這個
const SomethingContext = createContext({});

然後接下來,如何丟值到整棵樹,就要利用context的provider

<SomethingContext.Provider value={...value} />

有寫過redux的人,應該感覺很熟悉齁,對他就是概念很像,透過value的props傳遞到各個子層,還有一個很重要的點/

如果value的值更改了, 所有的children都會重新re-render

接下來如何取得provider傳下來的值

  1. 使用render props
<SomethingContext.Consumer>
	{(value) => {}}
</SomethingContext.Consumer>
  1. 使用useContext
const [value, dispatch] = useContext(SomethingContext);

好用的displayName在debug好用

還有很多好用的 下回待續,待想好一個主題


上一篇
Day 6 hook的前奏useEffect
下一篇
Day 8: jest-dom
系列文
我不會測試,所以寫Jest與React Testing Library30

尚未有邦友留言

立即登入留言