AngularとReactは一緒にプレイできますか？質問する

Question

彼らは本当に対立する勢力なのでしょうか？

ある意味ではそうですが、別の意味ではそうではありません。Angular ディレクティブ内で React を使用している人は確かにいますが、それは主にパフォーマンスを向上させるためであり、React が素晴らしいと思っているからではありません。そして、パフォーマンス向上のためだけに React を検討しているのであれば、React の価値提案を見逃していることになります。

同じ問題を解決するという点で、これらは対立する力であると言えます。React は MVC の単なる V であり、Angular は「本格的なフレームワーク」であるという議論はよくありますが、Angular と React は非常に似ています。

Angular にはコントローラーとディレクティブ (およびサービスとファクトリー) がありますが、React にはコンポーネントしかありません。このため、Angular の方がより完全なフレームワークであると解釈するのは簡単です。しかし、これを詳しく見ていきましょう。

コントローラー

React にはコントローラーと呼ばれるものは含まれていませんが、React の世界には「ビューコントローラー」と呼ばれる概念があり、これは Angular コントローラーに非常によく対応しています。React の「ビューコントローラー」は他の React コンポーネントと同様に定義されますが、レンダリングは最小限に抑えられます。その関心はデータ/状態の管理にあり、その状態をビューコンポーネントに渡して、そのデータ/状態をレンダリングします。

簡単な例は次のようになります。

var ViewComponent = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item => <li>{item.text}</li>)}
      </ul>
    );
  }
});

var ViewController = React.createClass({
  getInitialState() {
    return {
      items: []
    };
  },
  componentDidMount() {
    SomeStore.getItems()
      .then(items => this.setState({items: items}));
  },
  render() {
    return <ViewComponent items={this.state.items} />;
  }
});

したがって、ViewComponentここでのは HTML のレンダリングの詳細に関係し、ViewControllerはに渡すデータの取得と管理に関係しますViewComponent。

指令

Angular ディレクティブの概念が React ビューコンポーネントに非常によく適合していることに異論を唱える人はいないと思います。

サービスと工場

これは、依存性注入の概念があるために Angular に存在するものであり、基本的に「Angular は React よりも完全なフレームワークである」という唯一の議論です。Angular の DI 方式が JavaScript のような言語に適しているかどうか、また JavaScript は非常に動的であるため本当にそのようなものが必要なのかどうかについて何日も議論できますが、それはやめておきましょう。

Angular のように独自のモジュールシステムを作成する代わりに (Angular モジュール自体にはほとんど価値がないことは誰もが認めると思います)、React では好きなモジュールシステムを使用できます。トランスパイルされた ES6、CommonJS、AMD、単純な古いグローバルなど。コミュニティは ES6 と CommonJS にほぼ同意しており、これは良いことです (Angular は Angular 2 でその方向に進んでいます)。

したがって、DI に興味があるなら、優れたモジュールシステムと組み合わせると簡単に実装できます。さらに、Pete Hunt による React での DI に関するまったく新しいアプローチも非常に興味深いものがあります。http://jsfiddle.net/cjL6h/

react と angular を一緒に使用するのは良い考えでしょうか? できますか? それともそうすべきでしょうか?

将来的に React に移行する予定がある場合にのみ、これを実行します。Angular と React の両方を知っておく必要があるため、アプリケーションは理解しにくくなり、複雑になります。とはいえ、多くの人が Angular 内で React を使用しているようですので、これは単なる私の意見です。

React は UI 用ですが、Angular はコントローラーとビューを処理できます...しかし、React はビューの処理に優れていますか? Angular をコントローラーのみに割り当てることで、より優れたアプリを作成できますか?

前にも言ったように、これはよくある誤解です。Angular と React は同じ問題を解決しますが、解決方法は異なります。ビジネスロジックレイヤーを Angular モジュールシステムに結び付けないことの利点は、他のものへの移行が容易になることです。多くの人が Flux アーキテクチャを React と一緒に使用していますが、Flux には React 固有のものは何もありません。Flux のアイデアはどのフレームワークでも使用できます。

私が Angular で気に入っている点の 1 つは、React ではそうではないように思われることですが、Angular では関心の分離が実際に可能になるのに対し、React ではこれが少し混乱し始めていることです。少なくとも、Angular のやり方とは相反しているようです。

私はこれに全く同意できません。React アプリケーションは Angular アプリケーションよりも関心の分離が優れていると思います (私は Angular をたくさん使用しています)。React の考え方を理解するだけで十分ですし、Flux が何であるかを学ぶのも良い考えです。Angular で優れたアプリを作成できないと言っているわけではありません。私の経験では、React の方が Angular よりも「成功の穴に落ちる」可能性が高くなります。

Angular の学習曲線は 2 段階です。最初は、スコープ付きのコントローラーを作成し、そのスコープに配列を追加して、でそれを出力しますng-repeat。そのシンプルさに驚きます。ディレクティブを追加します。これは少し理解しにくいですが、コピーして貼り付けると機能します。やったー! その後、さらに深く掘り下げていくと、学習曲線の 2 番目の段階に到達し、Angular の内部を本当に理解し始める必要があります。スコープはプロトタイプ継承によって互いに継承し、その結果 (すべての式にドットが必要ng-modelなど) を知っておく必要があります。ディレクティブコントローラーとはどのようなものでしょうか。ディレクティブコントローラーとは何ですか。通常のコントローラーとの違いは何ですか。トランスクルージョンとは何ですか。ディレクティブのコンパイルステップでこれとあれを実行する必要があると誰かが言いましたが、それは何ですか。

React の場合、最初の学習曲線は少し急です。しかし、一度それを乗り越えれば、次のステップはありません。Flux の学習は 2 番目のステップと考えることもできますが、Flux を学習すると、他の Javascript フレームワークにも応用できる新しい知識が得られます。これは、「Angular ディレクティブのコンパイルステップ」では得られないものです。

React が Angular より優れているもう 1 つの大きな利点は、ほとんどが単なる Javascript であることです。React 要素のプロパティは、Angular 属性のような魔法の文字列ではなく、単なる Javascript オブジェクト/関数です。これは、通常のリンターがコールバック属性式にエラーがあるかどうかを通知できることも意味します。Angular では、コードを実行して動作するかどうかを確認する必要があります。

また、Javascript にはすでにブロックスコープがあるため、要素名に一意となるプレフィックスを付ける必要はありません。

では、Angular は役に立たないので React に移行すべきだと言っているのでしょうか。いいえ、そうではありません。多くの企業が Angular に多額の投資をしてきました。しかし、私に言わせれば、保守可能なアプリケーションを構築するなら、Angular には知っておくべき癖や奇妙な点がもっとあります。また、Angular 2 は完全に書き直されており、React から多くのインスピレーションを得ているという事実も考慮する必要があります (これは素晴らしいことです)。

Answer 1