React16—— Context API

背景紹介
   以下のコンポーネント構造があり、DコンポーネントのみがAコンポーネント内のデータを使用すると仮定すると、propsを多くの層に渡す必要があり、書くのが煩雑であるだけでなく、真ん中に挟まれたコンポーネントに不要なpropsを導入する必要がある.

  Context APIはこのような問題を解決するのに役立ち、多くの流行フレームワーク(例えばredux、mobxなど)が使用されています.しかしReact 16.3.0までは公式にはお勧めしていません.この記事では、旧版Contextを使用すると発生する問題と解決策について説明します.
  しかしReact 16.3.0はより効率的で安定したContext APIを発表した.
Context API
  Context APIは主に以下の部分から構成される.

React.createContext:ProviderとConsumerという2つの属性を持つコンポーネント

を含むContextオブジェクトを作成します.

const MyContext = React.createContext(defaultValue);

Providerコンポーネント:context値を使用する必要があるサブコンポーネントにvalueプロパティを受け入れ、valueプロパティの値は任意のJSのデータ型

であってもよい

Consumer ≪コンポーネント|Components|emdw≫:Providerコンポーネントの内部の任意のレベルで使用できます.サブ要素は、Providerコンポーネントが提供するvalueに等しいパラメータであり、戻り値はReactノードの関数

です.

  {value => /*    context      */}

   簡単な栗を挙げます.

// context.js
import { createContext } from 'react';

const defaultVal = 'defaultVal'
export default createContext(defaultVal);

// app component
import MyContext from './context';

class App extends React.Component {
  render() {
    return (
      
        
Context
        
      
    );
  }
}

// tab component
const Tab = () => (
  

    
  
);

// list component
import MyContext from './context';

const List = props => (
  
    {
      value => (
        
{value}
      )
    }
  
);

Class.contextType:作成したContextオブジェクトをclassのcontextTypeプロパティに割り当てることで、classコンポーネント内でthis.contextを使用してContext(関数コンポーネントではサポートされていません)を使用し、上記の例のappコンポーネントを変更できます:

class App extends React.Component {
  render() {
    return (
      
        
Context
        
      
    );
  }
}

App.contextType = MyContext;

   またはbabelプラグインを使用してstaticを使用してcontextTypeを初期化します.

class App extends React.Component {
  // use babel plugins
  static contextType = MyContext;
  render() {
    return (
      
        
Context
        
      
    );
  }
}

  注:Providerコンポーネントのvalue値がオブジェクトの場合、Providerが再レンダリングされるたびに、valueプロパティが常に新しいオブジェクトに割り当てられているため、下のすべてのconsumersコンポーネントが再レンダリングされます.valueの値をstateに上げることで、このような状況を防ぐことができます.
 
コードの例:https://github.com/MirrorHuang/react16-demo
参照先:https://reactjs.org/