学習ポータルを反応させます

その他 2019-10-16 00:31:44 訪問数: null

より良い読書体験を得るためには、元のアドレスにアクセスしてください。ポータル

、プロフィールREACT

どのような反応します

反応Facebookは市場にすべてのJavaScript MVCフレームワークのためだったので満足していないので、単にInstagramのを設定するために、自分自身のセットを書き、社内プロジェクトがFacebookの発祥です。それをやった後、私はそうでは、使用するには、このようなものは非常に簡単見つける2013年5月のオープンソース。

ここでは、にはほとんど注意を必要とするライブラリー（図書館）およびフレームワーク（枠組み）、差があるユーザーインターフェイスを構築するためのJavaScriptライブラリがあり、それ自体に反応し、我々は通常、ルータリアクトフレームワークが実際に/リアクトいうリアクト言います本質的な違い、の反応-Reduxのとの組み合わせは、それがライブラリやフレームワーク制御を体現です。

  • 「ライブラリ」を使用する開発者が利用できる、特定の良いパッケージの集まりで、手に特定のコレクション（メソッドや関数）で、ライブラリは何のコントロールの上に持っていない、それ自身の上にそのユーザーが完全に制御されます。
  • 名前が示すように「フレーム」は、それらの特性に基づいたフレームワークは、ユーザーがフレームワークのセットを選択した場合、その後、我々はフレームワーク自体を適合させる一定にする必要があり、ユーザにとってより完全なソリューションを提供しますです。

なぜリアクト？

これは非常に興味深い質問です、私は混乱し、動揺してみましょう。私は時間の期間を経て、簡単なブログシステム、円滑な学習曲線、これだけいくつかの基本的なHTML / CSSコードをビルドするのVueを使用しようとしている学校にまだあった時は、私が学び始めることができるようになります以来、しかし、学習が反応して、進捗状況になり比較的遅い...革新的な開発モデルを反応するための理由の一部であり、私はJSX構文の損失（野菜は原罪である）で午前。

「？Vueの優位性とは何ですかリアクト」Vueの著者、特にブルック答えを雨ノウハウでは、ほとんどこの質問に言及しました。

あなたは歴史的な位置の数年後にしたい場合はここで私は認める寛大なすることができ、Vueのより確かに高い反応します。実際に、私は、開発者として、だけでなく、心からヨルダンWalke、セバスチャンMarkbageは次のように感心、開発モデル提案レベルからの人々が新たな方向性を画期的。

スタート位置から反応前方新しいアイデアのUI開発を置くことです。ピート・ハント最も「再考のベストプラクティス」と呼ばれるスローガンに反応促進するために始めた、このような位置は、いくつかの新しいアイデアを開くに反応せ年、早く投げのようなコア・ユーザーのグループを集め、そしてこれに基づいてコミュニティを通じて反復それは常識が現像剤パターンに反応とみなすことが、今日の多くを生み出しました。これは、Vueの反応させるためには絶好の場所ですし、多くの場所が直接反応に触発されていました。それはFacebookのであるから、このような試みを行うことを敢えて反応します。業績の品質レベルを向上させるためのインフラ企業のこのような体重は巨大であり、そしてFacebookのエンジニアは、彼/彼女の習慣を変えることは問題ではありません、賃金やディナーに頼るには十分にスマートです。外部のプロモーションは、それが持っている大企業の一種類を勇気づけ、「業界を変える」です。

グラウンド「なぜリアクト？」と比較すると、（本当に画期的な開発モデルと反応）で反応は明らかにいくつかのより多くをpraised'd。

思考がそれのコンポーネントを反応するので？いいえ。私はコンピュータ工学の進歩の時代に属していると考えられている、似たような小さなマイクロサービスの数と、このコンセプトを考えて、必然的な傾向を提案した、成熟したチームのための新しいソリューションです。それは人気の角/ Vueのですかリアクトかどうか、両方の自然は、コンポーネントベースの概念をサポートしています。

それは優れたパフォーマンスを反応させるのためですか？私はノーだと思います。おそらく、そのユニークかつ効率的な仮想DOMのデザインの新生児反応し、フロントエンドは、より多くの場所に比べて、主キー（私は知らない、私はナンセンスを話して...）に政治の場での大気の上昇が、今のフロントエンド技術成熟していることができますデータは、実際に他のフレームワークと反応することは特に大きくないパフォーマンスの違いを見ることができます。通常の開発では、スピードでは、このようなコントラスト明らかな違いに具現、何の多くの使用はありません。

また、大規模な建設プロジェクトに適したリアクト言って、ビューを参照してください。私はあまり理解して何から、私は知っているシステムを反応させるの多くの自然な制約を持っているだけでなく、SpringBootは、位置の数をユーザに提供するデフォルトのようです不文律契約の一部は、強力な自然のエンジニアリングがありますいくつかの大規模のJavaチームプロジェクトに適しています、プラスいくつかの一般的なコーディングスタイルや縮小、。しかし、それは常に人ではなく、フレームワークの種類に依存し、大規模なプロジェクトを開発することはできません。

Javaのように、システムが十分に成熟して反応して、コミュニティはあなたの問題は、ネットワーク上の答えを見つけることは非常に簡単で、また非常に活発であり、いくつかの実証済みのプラクティスや車輪があります。私はそれがより多くの（私がいない引用）ことを理由にしていることを確信しています様々な問題を解決します。むしろ特殊な特性がありリアクトされています。あなたは、比較的簡単に使用できるネイティブネイティブモバイルアプリケーションを開発して反応します。

二つは、コアコンセプトに反応します

仮想DOM（Vituralドキュメントオブジェクトモデル）

私たちはDOMであるかを知るために必要なすべての最初の、「仮想DOM」の概念を理解するために。」のは、ページが、我々は今それを行う方法である必要があり、次のMarkdown文書に変更を加えるためのプログラムを書く必要があることを想像し、好きなものを忘れてみましょう：

# Title
## subtitle - 1
content - 1
## subtitle - 2
content - 2

例えば、私が今欲しいcontent - 2コンテンツを変更するには、その後、私は動作させるためには、それに最後のトラバースまで、行ごとにトラバースし続ける必要があり、コンテンツの変更の操作が似ているので、私は、この操作を最適化するために見てみたい場合は、最もアイデアは、それは簡単な効率を向上させるために、木の高さを低くするようにすることです。

DOMの概念

DOMは、ドキュメントオブジェクトモデル英語の頭文字であるドキュメントオブジェクトモデルという。それは、これらのオブジェクトを操作することができるオブジェクトとして、木構造として各ノードをHTML、XHTMLまたはXMLドキュメントを置くクロスプラットフォームのプログラミング言語に依存しないAPI、プログラミング言語であり、その後、文書を変更します構造、文書の表示にマッピングされました。DOMとJavaScriptの始まりが絡み合っている場合は、それ以降の彼らは最終的に二つの別々のエンティティへと進化します。DOMは、我々が操作するためにJavaScriptを使用している時間のほとんどが、特定のプログラミング言語に依存しないように設計されているが、実際には、他の言語（Pythonなど）することができます。

そのHTMLコードがある場合：

<html>
  <head>
    <title>文档标题</title>
  </head>
  
  <body>
    <a href="">链接</a>
    <h1>标题</h1>
  </body>
</html>

それは最終的に同じツリー構造を次のようする必要があります。

右ここDOMノードタイプのディスカッションクラスああ方法は、私たちはうまくDOMの一般的な考えを持っている必要があります。

DOMブラウザのレンダリング処理

私たちは、単にブラウザDOMのレンダリングプロセスを見ることができます。

  1. HTML DOMツリーの確立を解析します。
  2. CSSの構文解析、DOMツリー形成Reanderの木を組み合わせました。
  3. 各ノードのサイズ、位置などの情報を決定するために、レイアウトツリー（レイアウト/リフロー）をレンダリングします。
  4. ツリー（ペイント）、ページレンダリングのピクセル情報をレンダリング描きます。
  5. GPUへの情報のブラウザ層は、GPU合成（コンポジット）の層となり、画面上に表示。

なぜ、低速動作DOM

実際には、厳密に言えば、それは特定の条件に遅い、遅い簡単な操作DOMではありません。

単一のDOMイベントループ内で複数の操作が、JSコードがすぐにDOMノードを最新の情報を得ることができることが望ましい場合があるときを想像し、それから、ブラウザJSエンジンは、順番に、最新のDOMをレンダリングするために計算DOMエンジンを呼び出すハングアップする必要がありましたその後、最新の情報のDOMノードを取得し、ために追従動作を継続するJSエンジンを再起動します。

エンジンだけでなく、上述したスイッチング動作、複数回、レイアウト計算に必要な時間、再描画DOMを期待することができます。実際、paintそれは時間のかかるプロセスは、しかし、されたlayout私たちは判断できない、より多くの時間のかかるプロセスでありlayout、それはトップダウンかボトムアップでなければならない、と一度もlayout文書全体のレイアウトを再計算伴います。

しかし、layoutそれは確かに避けられないので、我々は主に最小化するlayout回数を。

そのため、エンジンのスイッチング周波数を減らし、変更の規模を縮小DOM DOMパフォーマンスの最適化プログラムへの鍵です！

仮想DOMのアルゴリズムステップ

仮想DOMは、上記の問題を解決することであり、その本質は、私たちの真のDOMツリーをシミュレートするために、JSオブジェクトを使用することで、次のように、そのアルゴリズムは次のとおりです。

  1. JavaScriptでオブジェクトマッピングDOMツリー構造を形成し、その後、文書に挿入された実際のツリーでDOMツリーを構築します。
  2. 状態変化が、ときに2つのツリーの違いを記録し、新しいオブジェクトツリーを再構築し、新しい木や古い木で（差分アルゴリズム）を比較。
  3. ステップ1で構築し、実際のDOMツリーに適用される記録の違いの第2ステップでは、ビューが更新されます。

の現実と仮想のDOMのDOMとの違い

したがって、私たちは二つの違いを比較することができます。

  1. 複数の状態を変更する、メモリ内の複数のノードレイアウトへの影響、頻繁な変更が、JSオブジェクト、その後実際のDOMにDOMを変更するために修正された部分使い捨て実際の必要性、及び最終的な再描画のタイプセットを比較し、過剰な還元マルチDOMノードレイアウト及び損失を再描画します。
  2. 実際のDOM頻繁組版と効率性を再描画は非常に低いです。
  3. 仮想DOMを効果的に大面積（実際のDOMノード）を減少させ、最終的には実際のDOMとの間の差は、のみ（2で）局所的にレンダリングすることができるので、レイアウトを再描画します。

DOM仮想損失を使用して計算：

（ノード少ない）=全損失仮想DOM + CRUD（アルゴリズム差分の効率に関する）実際の付加および欠失+ DOM差レイアウトと再描画

真のDOMを使用して直接損失計算：

総損失=真の完全なCRUD + DOM（おそらくより多くのノード）のレイアウトと再描画

差分アルゴリズム

コア仮想DOMはdiffが、それは自動的に調整する必要があり、その後領域のみを変更し、それらの調整を計算に役立つはず、貯蓄率は、この「少しスピードを」実行されていないが、開発/保守スピードの速さ/論理エクステント簡潔なことですそして他の「全体的な速度。」

しかし、仮想DOMは、参照が相対的な観点から、中高速であり@尤雨溪、ほとんど「オンライン操作のDOMが本当の遅い言って知っている問題で大いにあるが、よりテストの結果は、より速く反応し、なぜですか？「答えはそれの言葉は次のとおりです。

仮想DOMが速いと思うほどナイーブではないですか、diffは、バッチ処理MVVMはそれを行うことができます無料ではない、そして最終パッチがあるときにネイティブAPIを使用していません。私の意見では、仮想DOM真の価値は、パフォーマンスになることはありませんが、それは1）UIの種類に応じて、プログラムの扉を開いている; 2）などReactNativeとしてDOM、よりバックエンドにレンダリングすることができます。

diffは3つのタイプに分けることができます。

  • ツリー差分： DOMは、全作品のコントラスト完了したときに、新旧2つのDOMツリー、層プロセスによるコントラスト層は、すべての要素を見つけることができるようにする必要があり、必要に応じて更新する必要がツリーのDiff、層ごとです。
  • コンポーネント差分：各層の時間ツリー差分、差分成分と呼ばれるコントラスト成分レベルを、行います。
    • 前後のコントラスト、コンポーネントの同じタイプの場合は、され、一時的に、このコンポーネントを更新する必要がないと考えます。
    • あなたはコンポーネントのさまざまな種類の前と後を比較した場合、あなたは、古いコンポーネントを削除し、新しいコンポーネントを作成し、ページに追加する必要があります。
  • 要素差分：アセンブリのコントラストを行う場合、二つの成分の同一タイプならば、要素差分と呼ばれる要素のレベルを比較する必要があります。

三、Hello Worldの

  • 引用からの：のhttp：//www.ruanyifeng.com/blog/2015/03/react.html - ルアンYifeng - はじめに反応するチュートリアルの例

（直接操作）を次のように使用されるページのソースを反応させ、構造は以下の通りであります：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
    );
</script>

</body>
</html>

コードは、上記の二つの警告があります。まず第一に、最後の<script>ラベルtype属性text/babel。これは、ユニークなJSX文法を反応するので、JavaScriptを使用して互換性がありません。JSXの場所の使用は、追加する必要がありますtype="text/babel"。

第二に、3つのライブラリ上で共通のコード：react.js、react-dom.jsそしてBrowser.js、彼らが最初にロードする必要があります。このうち、react.jsコアライブラリは、リアクトでreact-dom.js、DOMに関連する機能を提供しBrowser.js、実際にラインが、それが完了するために、サーバーに配置する必要がある場合、このステップは非常に時間がかかり、JavaScriptの文法にJSXの役割です。

$ babel src --out-dir build

上記のコマンドはなりますsrcサブディレクトリjsすべてにトランスコードファイルの構文変換、ファイルbuildのサブディレクトリを。

ReactDOM.render（）

ReactDOM.renderは、HTML言語へのテンプレートの最も基本的な方法で反応し、指定されたDOMノードを挿入します。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

上記のコードであるh1ヘッダ、挿入example以下のように結果は、ノード。

JSX文法

  • 引用からします。https：//www.runoob.com/react/react-jsx.html - RUNOOB.COM - JSXに反応

JavaScript言語で直接書かれたコード、HTML言語では、任意の引用符なしで、それはだJSX構文書くためにHTMLとJavaScriptを混合できます。以下のコードを見てみましょう：

const element = <h1>Hello, world!</h1>;

要素は、通常のオブジェクトを反応させる実際には異なるブラウザDOM要素と、ブラウザDOM DOMデータコンテンツて反応要素は同じままであることを確実にするために反応します。要素がルートDOMノードにレンダリングされて反応するように、我々は、彼らがReactDOM.render（）メソッドに渡され、それをページにレンダリングされます：

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

JSXはあなたが巣上記のコードでHTMLタグを複数ことができ、HTMLに似ていますが、使用必要がありdiv、それを取り巻く要素を。

JavaScript式

私たちは、JSXでJavaScript式を使用することができます。中括弧内に書かれた式{}です。例としては、次のとおりです：

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

JSXで使用されていない場合は、他のステートメントを使用することができる条件（三項演算子）の代わりに式を。以下の実施例変数場合iがに等しい1つのブラウザ出力trueに私の変更された値が出力される場合、falseに。

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

スタイル

インラインスタイルを使用することをお勧め反応します。我々は使用することができキャメルケースのインラインスタイルを設定する構文を自動的に指定のデジタル要素の後に追加REACT PX。以下の実施例は、h1は要素に追加するMyStyleはインラインスタイルを：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

注記

ノートには、次のような例は、中括弧で記述する必要があります。

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

配列

JSXはテンプレート配列の挿入を可能に、アレイは自動的にすべてのメンバーに展開されます：

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

参考資料

  1. http://www.ruanyifeng.com/blog/2015/03/react.htmlは -チュートリアルの例をはじめと反応-ルアンYifeng
  2. https://www.jianshu.com/p/60100985dd7f -フレームのフロントエンドとライブラリの違い
  3. https://www.zhihu.com/question/301860721/answer/545031906 - Vueの利点と反応して、それぞれ、何がありますか？
  4. https://zhuanlan.zhihu.com/p/22184194 - あなたは本当にDOMはまだ理解できますか？
  5. https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction - DOMの概要
  6. https://blog.huteming.site/posts/e0c41c5f/ - なぜ仮想DOM速いです

慣例により粘着性の尾：

転載へようこそ、ソースを明記してください！
独立したドメイン名のブログ：wmyskxz.com
ジェーン帳ID：私は3心はありません@
GitHubのを：wmyskxzは
公共マイクロ信号に注意を歓迎：wmyskxz
彼らの学習＆学習教材を共有＆リビング
友人が通信したいまた、QQのグループを追加することができます：3382693
マネー

おすすめ

転載: www.cnblogs.com/wmyskxz/p/11681955.html
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com