react context学習

reactデータ転送ではpropsによるデータ転送が一般的ですが、ページ全体のすべてのコンポーネントで使用する必要があるコンテンツもあります.この場合、propsを使用して1層1層転送すると煩雑になります.この問題をどのように解決するかreactはcontextコンテキストを提供してこの問題を解決します.react-reduxを使用してreact内のコンポーネント間のデータ転送を行う場合、contextは基本的に使用されません.
React.createContext

const MyContext = React.createContext(defaultValue);

contextオブジェクトを作成し、react renderがcontextのコンポーネントを購読したときにProviderからcontextの値を読み込みます.
メソッドの最初のパラメータは、defaultValueパラメータであり、コンポーネントツリーにProviderコンポーネントが提供されていない場合にのみ使用されます.これは、undefinedをProvider値として渡すと、consumerコンポーネントがdefaultValueを使用することはありません.
Context.Provider

各Contextオブジェクトには、Provider valueのプロパティが含まれています.このvalueプロパティは、contextの子孫コンポーネントを直接取得することができます(サブスクリプションには2つの方法があります).これにより、propsが深層コンポーネントに伝達される問題を回避し、contextのコンポーネントをサブスクリプションすることができます.contextの値が変化するとコンポーネントが自動的に再renderされます
Class.contextType
これはcontextコンテンツを購読する方法であり、クラスのstatic contextTypeが以前に作成されたcontextオブジェクトに設定され、現在のコンポーネントの各ライフサイクルでthis.contextを使用してコンテキストにアクセスする

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}
MyClass.contextType = MyContext;

public class fields syntaxを使用してもご利用いただけます

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}

Context.Consumer
もう1つのcontextを購読する方法はComsumerコンポーネントを使用し、Consumerコンポーネントのサブコンポーネントは関数であり、この関数の最初のパラメータはcontextの値であり、関数の戻り値はreactのelementでなければならない.

  {value => /* render something based on the context value */}

公式ドキュメント自分で書いたdemo