Day19 React Context API

在典型的 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