• context可以避免資料一層一層透過props傳遞
• Context 是設計在 React 元件中共享資料，類似在 React 元件的全域（global），這些資料類似「使用者的登入狀態」、「樣式（theme）」、「檢視語言（preferred language）」、「資料快取（cache）」。
• Context 主要用在當多個不同嵌套層級的元件要用到相同的資料時才會使用，除此之外，應該盡量避免使用，因為它會使得元件更難被復用（reuse）。

透過下方的範例可以看出參數是一層一層傳遞

使用useContext

使用useContext需在父層用Provider包覆，這樣被包覆的子層都能取得資料，就能解決上下文問題，不會有中間層接收到不需要使用的資料。

• 須先創建createContext，並用創建的createContext.Provider將要接收參數的子層包覆
• Provider須給入value參數作為子曾接收到的值

// 父層
import React, { createContext } from 'react'
import Title from '../components/Title'

export const NameContext = createContext()

const App = () => {
const name = "Ian"
	return (
		<NameContext.Provider value={name}>
			<Title />
		</NameContext.Provider>
	)
}

export default App

子層使用useContext接收傳遞的參數

• 引入父層中導出的createContext
• 使用useContext取得值

// 接收參數的子層
import React, { useContext } from 'react'
import { NameContext } from '../src/App'

const contextValue = useContext(NameContext) // 這時候就能接收到父層的值，Ian 

const Title = () => {
	return (
		<div>
			what's you name: {contextValue}
		</div>
	)
}

export default Title

codesandbox範例

透過下方範例使用context傳遞資料， App > Demo > Title ，Title組件跳過Demo取得App傳遞的資料

https://codesandbox.io/s/react-context-demo-sl7u8?file=/src/App.jsx

參考：

http://www.ptbird.cn/react-createContex-useContext.html#menu_index_1