[react] useContext

useContextを使用するには3つのステップがあります.

使用方法

1.Contextの作成

// Context.js
export const LevelContext = React.createContext()

Contextの名前会議はContextです.コンポーネントとして、Pascal Caseを作成します.

2. Provider Component

import { LevelContext } from './Context';

const LevelOne = () => {
  const fetch = () => console.log('fetch...');
  return (
    <LevelContext.Provider value={fetch}>
      <LevelTwo />
    </LevelContext.Provider>
  )
}

生成されたContextプロバイダをchildrenにパッケージします.valueに希望する値を入れればいいです.今はLevelContextプロバイダサブアイテムのコンポーネントは、値にアクセスできます.

3.userContextとして値を使用

import React from 'react';
import { LevelContext } from './Context';

const LevelTwo = () => {
  const { fetch } = React.useContext(LevelContext);
  return (
    <div>
      <button onClick={fetch}>[Level2] I can fetch without props!</button>
    </div>
  )
}

生成されたContextをインポートし、useContext({생성한 Context})を使用してfetch分解をインポートします.今ボタンをクリックするとfetchが実行できます!

Propsシステムとの違いは何ですか?

機能に差はありません.しかし,構成部分の構造がdeep propsであれば,中間段階の構成部分に不要なpropsを加える.
propsが多ければ多いほど、コンポーネント管理が難しくなります.
多くの場合、論理に基づいてサブコンポーネントでフォームを変更し、最上位コンポーネントでAPIを要求する必要がある場合、deep props構造はコード分析を非常に困難にする.
この場合、useContextはかなり良いツールです.
使用方法は簡単で、依存項を必要としない反応器から直接提供されるコンポーネントです.

Example

簡単なサンプルコードを作りました.
useContextを使用すると、すべてのサブコンポーネントがfetchできます.

Ref

React Docs : useContext