VueとReactコンポーネント通信のまとめ

現代の3大フレームワークの中で、その中の2つのVueとReactフレームワーク、コンポーネント間の値伝達方式はどれらがありますか?
コンポーネント間の値伝達方式
コンポーネントの値伝達シーンは、次のようになります.

親子間

兄弟の間

階層間(孫の祖父以上)

任意のコンポーネント間

親子の間
Vue
Vueは単一のデータストリームに基づいて設計されたフレームワークであるが,いくつかの構文を提供し,いくつかの動作を実現する命令を与えた.
親->子:propsで子コンポーネントにデータを渡す子->親:emitで親コンポーネントに値を渡す
また、childrenによってコンポーネントの親または子コンポーネントのインスタンスを取得した後、インスタンスオブジェクトによってコンポーネントのプロパティを変更する他の親子コンポーネント通信方法もあります.フォームコントロールでは、v-modelを使用して双方向データバインドが実現されます.実際には、v-modelは構文糖であり、内部実装またはフォームコントロールのchangeイベントを傍受し、コンポーネントにデータを渡してデータを修正し、双方向データバインドを実現します.
React
親->子:propsで子コンポーネントにデータを渡す子->親:親コンポーネントで子コンポーネントに関数を渡し、子コンポーネントでこれらの関数を呼び出してコールバック関数でデータを渡す
兄弟の間
Vue
Vueでは、親コンポーネントの下にあるサブコンポーネントインスタンスを検索して、コンポーネントを通信できます.this.$parent.$childrenのように、$childrenでは、コンポーネントのnameを介して通信するコンポーネントを見つけ、通信することができる.
React
Reactでは、親コンポーネントにデータを渡し、親コンポーネントを兄弟コンポーネントに渡す必要があります.
多層コンポーネント
Vue
マルチレベルのコンポーネントでは、$parentを絶えず取得することによって、伝達する必要がある祖先レベルのコンポーネントを見つけて通信することができるのは当然であるが、このような煩雑さは誤りやすく、推奨されない.Vueは2.2.0にprovide/injectを追加してデータを転送する.すなわち、先祖コンポーネントにデータを提供し、使用するコンポーネントにデータを注入することで、サブコンポーネントでデータを使用することができます.provide/injectドキュメント

//        'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

//       'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

React
Reactでは、Vueと同様にマルチレベルコンポーネントの通信を処理する方法が提供される.contextでは、生産者と消費者が提供され、親コンポーネントでデータを生産し、サブコンポーネントでデータを消費する.使用上は、生産者のProviderにサブアセンブリを包むだけで、データが必要なサブアセンブリでは、Consumerで包むことで、生産者のデータを得ることができます.contextドキュメント

// Theme context, default to light theme
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // App component that provides initial context values
    return (
      
        
      
    );
  }
}

function Layout() {
  return (
    

      
      
    
  );
}

// A component may consume multiple contexts
function Content() {
  return (
    
      {theme => (
         
      )}
    
  );
}

任意のコンポーネント間
Vue
任意のコンポーネントについては、EventBusを簡単に使用し、より複雑なVuexを推奨します.
React
簡単にEventBusを使い、複雑にReduxを使う
まとめ
もちろん,コンポーネント間の伝達値は柔軟であり,多様な経路があり,親子コンポーネントも同様にEventBus,VuexまたはReduxを用いることができ,フレームワーク開発者の提案に従い,開発に適応する比較的良い実践にすぎない.