1。ReactJSの紹介
Reactは最近非常に人気のあるフロントエンド開発フレームワークです。 ReactはFacebookの内部プロジェクトから生まれました。これは、会社が市場にあるすべてのJavaScript MVCフレームワークに満足していなかったため、Instagram Webサイトを設定するために独自のセットを作成することにしました。私がそれを作った後、私はこの一連のものが非常に有用であり、2013年5月にオープンしたことがわかりました。反応のデザインのアイデアは非常にユニークであるため、革新的で革新的で、優れたパフォーマンスを備えていますが、コードロジックは非常に簡単です。したがって、ますます多くの人々が注意を払い始め、それを使用し始めています。これは、将来のWeb開発の主流のツールであると信じています。
Reactjs公式ウェブサイトアドレス:http://facebook.github.io/react/
Githubアドレス:https://github.com/facebook/react
Reactjs中国の住所:http://reactjs.cn/react/docs/getting-started.html
反応とは何ですか?
Reactは、ユーザーインタラクションインターフェイスを開発するためにFacebookで作業する優れたプログラマーによって開発されたJSライブラリです。そのソースコードは、Facebookとコミュニティの優れたプログラマーによって維持されているため、技術サポートを提供するために非常に強力な技術チームがあります。 Reactは、コンポーネント、JSX、仮想DOMなど、多くの新しいものをもたらします。それが提供する仮想DOMは、レンダリングコンポーネントを非常に高速にし、DOMを頻繁に動作させる重い作業から解放されます。 Reactを知っている人なら誰でも、それがMVCのVレイヤーにもっと焦点を合わせていることを知っています。フラックスなどの他のものと組み合わせることで、強力なアプリケーションを簡単に構築できます。
2。ReactJS機能
1。仮想Dom
DOM Diffアルゴリズムを介して、ページ全体をレンダリングせずに差別化された部品のみが更新され、それにより効率が向上します
2。コンポーネント化
論理構造やスタイルなど、ページをいくつかのコンポーネントに分割します
コンポーネントには独自のロジックのみが含まれています。これは、コンポーネントを更新するときに予測できます。これは、メンテナンスを助長するコンポーネントです。
ページは複数のコンポーネントを分割し、再利用できます
3.一方向のデータフロー
データは、トップレベルのコンポーネントからサブコンポーネントに渡されます
データ制御可能
3。反応を始めましょう。こんにちは、世界を書いてください。まず、JSXが何であるかを理解しましょう。
Reactのコアメカニズムの1つは、仮想DOM:メモリ内で作成できる仮想DOM要素です。 Reactは仮想DOMを使用して、実際のDOMの操作を削減し、パフォーマンスを向上させます。実際のネイティブDOMと同様に、仮想DOMはJavaScriptを介して作成することもできます。たとえば、:
var child1 = React.createelement( 'li'、null、 'first text content'); var child2 = race.createelement( 'li'、null、 'second text content'); var root2 = race.createelement( 'ul'、{classname: 'my-list'}、child1、 child2); React.render(<div> {root2} </div>、document.getElementById( 'container5'));このメカニズムを使用して、JavaScriptを使用してJavaScriptを使用して実際のDomsを作成できるように、JavaScriptを使用して完全なインターフェイスDOMツリーを構築できます。ただし、そのようなコードはうまく読めないため、ReactはJSXを発明し、おなじみのHTML構文を使用して仮想DOMを作成しました。
var root =(<ul classname = "mylist"> <li>最初のテキストコンテンツ</li> <li> 2番目のテキストコンテンツ</li> </ul>); race.render(<div> {root} </div>、document.getElementbyid( 'container6'));4。5つの方法でhello in Reactを始める方法
方法1
<div id = "example1"> </div> <script type = "text/jsx"> race.render(// direct html <h1 classname = "classn1"> 1 hellow direct html world </h1>、document.getelementbyid( 'embles1')); </scrip>
方法2
<div id = "embome2"> </div> <script type = "text/jsx"> race.render(//要素を直接React.createelement( 'h1'、{classn2 '}、' 2 hello、create real world! ')、document.getelementbyid(' embles2 '));方法3
<div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createclass({render:function(){// return <h1> hellowコンポーネントの作成html world </h1> //ブラケットの有無にかかわらず戻る(<h1 classname = 'classn3'> </h1>);}}); React.render(// create element <createel/>、// create <createel> </createel> document.getElementById( 'emple3')); </script>方法4
<div id = "embles4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass(// jsxモードでrenderを直接作成:function(){react.createelement( 'h1'、{classname: "classn4"}、 "コンポーネントメソッドの要素React.CreateElement(jsxCreateel、null)、document.getElementById( 'emple4')); </script>方法5
<div id = "embles5"> </div> <script type = "text/jsx"> var hello = race.createclass({// template hello render:function(){return(<span> {this.props.data} </span>)}}});ステッチ</span>)}}); React.render(// 2テンプレートコンポーネントに要素を作成<H1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>、document.getElementByid( 'example5')); </scrip>5。上の結果画像
添付コード:
<!doctype html> <html> <head> <meta charset = "utf-8"> <title> unt titled document </title> <meta name = "viewport" content = "inviartscale = 1.0、user-scalable = no、maximing-scale = 1、width = device-width"/>パディング:0;} body {background:#333;}#box {background:url(loveimg/qioa-fxehfqi8208393.jpg)ノーレピートセンタートップ;幅:550px;国境:8pxソリッド#ffff; -webkit-box-sizing:border-box;マージン:50px auto;}#example1、#example2、#example3、#emple4、#example5 {margin:20px auto;幅:100%;背景:RGBA(255,255,255、.3);パディング:5px 10px;フォントサイズ:13px;色:#f1f1f1; -webkit-box-sizing:border-box; } </style> <div id = "box"> <div id = "embly1"> </div> <script type = "text/jsx"> racend.render(// direct html <h1 classname = "classn1"> 1 hellow direct html world </h1>、document.getelementbyid( 'example1'); type = "text/jsx"> React.render(// rement React.createement( 'h1'、{classn2 '}、' 2 hello、create element world! ')、document.getelementbyid(' embler2 ')); </script> <div = "example3"> </div> <script = "/jsx"> jsx "> jsx"> jsx "> jsx CreateEl = React.createClass({render:function(){// return <h1> hellowコンポーネントはhtml world </h1> //ブラケットの有無にかかわらずreturnを作成します(<h1 classname = 'classn3'> 3 hellowコンポーネントはhtml world </h1>);}) <CreateEL> </createEl> document.getElementById( 'embles3')); </script> <div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass({// jsx直接:function(){recreteelement( 'h1」こんにちは、JSXの世界を直接作成します! ") render:function(){return(<span> {this.props.data} </span>)}}); var world = race.createclass({//テンプレートworld render:function(){return(<span> and <span> and <span> and </span>)}}) > <hello data = '5 hello'/> <world/> </h1>、document.getElementbyid( 'example5')); </script> </div> <scrip = "build/race.min.js"> </script> <scrip = "build/jsxtransformer.js"> </body> </html>ここにあなたのためのいくつかの追加の知識があります:
対応用語
反応要素
HTML要素を表すJavaScriptオブジェクト。これらのJavaScriptオブジェクトは、最終的に対応するHTML要素にコンパイルされます。
コンポーネント
1つ以上の反応要素を含む反応要素をカプセル化します。コンポーネントは、ページング、サイドバーナビゲーションなどの再利用可能なUIモジュールを作成するために使用されます。
JSX
JSXは、XMLと同様に、Reactで定義されたJavaScriptの構文拡張です。 JSXはオプションであり、JavaScriptを使用してReactアプリケーションを書き込むことができますが、JSXはReactアプリケーションを書き込む簡単な方法を提供します。
仮想dom
仮想DOMは、DOMツリーをシミュレートするJavaScriptオブジェクトです。 Reactは仮想DOMを使用してUIをレンダリングし、仮想DOMのデータの変更を聞き、これらの変更をUIに自動的に移行します。