1. 程式人生 > 實用技巧 >React.createContext是怎麼傳遞資料

React.createContext是怎麼傳遞資料

Context 通過元件樹提供了一個傳遞資料的方法,從而避免了在每一個層級手動的傳遞 props 屬性

Context 設計目的是為共享那些被認為對於一個元件樹而言是“全域性”的資料,例如當前認證的使用者、主題或首選語言。例如,在下面的程式碼中,我們通過一個“theme”屬性手動調整一個按鈕元件的樣式:

使用 context, 我可以避免通過中間元素傳遞 props:

  • 不要僅僅為了避免在幾個層級下的元件傳遞 props 而使用 context,它是被用於在多個層級的多個元件需要訪問相同資料的情景。
  • 父元件 Provider 提供上下文 value

    下面程式碼中,父元件引入了例項,並且通過MyContext.Provider

    將父元件包裝,並且通過Provider.value將方法提供出去。

  • 3、子元件 useContext 解析上下文

    下面是子元件,相同的,也需要從context-manager中引入 MyContext 這個例項,然後才能通過const { setStep, setNumber, setCount, fetchData } = useContext(MyContext);解析出上下文中的方法,在子元件中則可以直接使用這些方法,修改父元件的 state。