在典型的 React 應用程序中，數據通過 props 自上而下（父元件到子元件）傳遞，但是對於應用程序中的許多組件都會使用到的資料，或是定義資料的元件跟實際用到資料的元件差了很多層，那麼夾在兩者中間的元件就會多了很多次不必要的傳遞，使用這種每次用都要傳遞到元件的每個層別的傳遞方式很麻煩。

Context 提供了一種在組件之間共享這些值的方法，允许你輕鬆將 prop 傳遞到元件樹不同層别，而無需將 prop 傳遞到每個層别。

如何使用Context

建立Context 的方式是在根元件的地方（例如，App.js）透過 <Context.Provider> 中的value屬性，可以把需要傳遞的資料帶入 Context 中，接著在需要使用到此資料的地方，可以透過 <Context.Consumer> 元件，取得 Context 的值取得 Provider的value 內的資料。

若有需要修改 Context 中的內容，則是去修改根元件 <Context.Provider> 中的 value，如此子層的元件就可以再次透過 < Context.Consumer> 元件取得新的資料。

1.建立一個 createContext

const Question = createContext();

2.使用 Context.Provider傳遞數據給子元件

const App = () => {
    return (
        <div>
          <Question.Provider value={"How to use Context ?"}>               
                 <ComA />               
            </Question.Provider>
        </div>
    )
}

export default App;
export { Question };

3使用Context.Consumer 接收父元件傳遞的數據

import React from 'react';
import { Question } from "../App"


const ComC = () => {
    return (
        <div>
          <Question.Consumer>
          {(ques) =>{
              return (
                <h1> Question is: {ques}</h1>
              );           
             
          }}           
           </Question.Consumer>;
        </div>
    )
}

export default ComC