Context API

素子間でデータを交換するにはpropsを使用する必要があります.でももし.

このように親の子コンポーネントではなく親の親コンポーネントにデータを渡すと、伝達方法が面倒になります.
図に示すように、2回しか経たないが、10回経たなければならないと、伝送媒体である素子がデータを携帯しなければならず、素子の状態管理が困難となる.
この場合、context apiを使用すると、伝達媒体素子を介さずにpropsを介して直接データを伝達することができる.

const TaskContext = createContext();

const TaskProvider = ({ children }) => {


  return (
    <TaskContext.Provider value={{data,methods}}>
      {children}
    </TaskContext.Provider>
  );
};

export default TaskProvider;

createContext関数を使用してcontextを作成し、contextを返す関数を作成します.
TaskProviderはサブコンポーネントを受信し、コンテキストTaskContextを作成します.Providerエレメントを返し、propsを使用してvalueを挿入することで、サブエレメントはvalue内部の値にいつでもアクセスできます.
伝え方はこうです.

<TaskProvider>
      <Children />
</TaskProvider>

TaskProviderのデータを使用するChildrenエレメントをラップし、Childrenエレメントからデータを受信して使用すればよい.

const data = useContext(TaskContext);

これによりuseContext(生成されたcontext)を実行してデータを受信することができる.