3

アプリのいくつかのページを既に作成しています。JavaScript フレームワークと 1 秒未満の動的ページが必要なので、React/Flux を試してみようと思います。

多くの読書にもかかわらず、既存のコードベース (html/js) を保持し、データベース/動的実現との相互作用が必要な Web ページの特定のブロックでのみ React (jsx 、モジュール) を使用できるかどうかは完全にはわかりませんか?

例を見てみましょう: 私のページにはたくさんのものがあります: ブートストラップ (css を使用して) を実際に舞台裏で使用している javascript/ドロップダウン用の DOM ex などを調整しました)、メディアクエリを有効にするための Respond.js ie8 (私は DOM を推測します)、および intercom.io のような多くのサードパーティ ツールや、画面の下部にある Google アナリティクス js 追跡ウィンドウですらあります。ページがどのように見えるかをここで確認できます。

ここに画像の説明を入力

私の必要性：ブロック（D）の動的調整とリアルタイム機能が必要なだけで、他のすべて、ヘッダー（B）、インターコム（C）、および残りはそのままにしておくことができます。それらを現在のhtmlコードに保持できます。

だからここに私の質問があります：

  • （1）reactのページ上のすべてを変換する必要がありますか、それともブロック（D）をjsx/reactに入れ、残りをそのままにしておく必要がありますか？

  • (1) React によってもたらされる主な利点 (仮想 DOM と差分) を活用したいのですが、ページ全体が React にない場合でも、それを使用できますか?

  • 答えが基本的に「すべてかゼロか、react jsx ですべて実行し、ページ全体をやり直す必要がある」である場合は、html を変換し、ドロップダウン、ライト ボックスなどの DOM を使用するすべての js スクリプトの代替手段を見つけます。 、intercom.io スクリプト、Google アナリティクス スクリプトでは難しいですか？つまり、css を保持し、これを使用して html http://facebook.github.io/react/html-jsx.htmlを変更できますか? それは本当に簡単ですが、ここに問題があるのではないかと心配しています... :)

4

2 に答える 2

1

アプリのビュー レイヤーに関しては、すべて React で実行できます (はい、react は必要なすべてのことを実行できます)。

私が提案する最初のことは、ドキュメントの反応サイトに向かい、Googleと YouTube を使用していくつかのチュートリアルを実行してから、完全ではなく反応を使用してアプリを新たに再構築することです。(JSX を使用)。

React の仕組みと props と states の使い方を理解したので、一度にアプリのフラグメントをマージすることになるでしょう。

考慮すべき最も重要なことは、コンテキストです。React は単純な Javascript であるため、既存のアプリから任意のオブジェクトをバインド、呼び出し、適用できます。

var blockA = React.createClass~
    blockB = React.createClass~
    blockC = React.createClass~
    blockD = React.createClass~

React は単なるコンポーネントであり、各ブロックはコンポーネントです。

しかし、これ以上強調することはできません。React の基本原則を理解することは、まったく難しいことではありません。

編集...

はい、JSX を使用します。最初はばかげていると思いましたが、優れています。

DOM 操作では、オール オア ナッシングです。React は DOM のコピーを使用して、実際の DOM をより高速に操作します。DOM に触れないコードの部分については、React で大きな違いはありませんが、React には、状態の変更をコンポーネントの子に渡すという美しいワークフローがあります。本当にあなた次第ですが、Reactを使用している場合は、すべてのDOMをreactで行います。あなたがやろうとしていることの 70% 以上は、DOM 操作である可能性があります。

一般的な私のアドバイスは、それがどれほど「難しい」かについてあまり考えないことです。基本をどれだけ早く習得できるかを考えてください。把握するのは非常に簡単です。

于 2015-03-03T17:14:51.760 に答える