ホームページ > 記事 > ウェブフロントエンド > わかりやすい ReactJs 入門チュートリアル - Essential Edition_html/css_WEB-ITnose
わかりやすい ReactJs 入門チュートリアル - Essential Edition_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:101054ブラウズ
現在、最も人気のあるフロントエンド フレームワークには、AngularJS、React、Bootstrap などが含まれます。私は ReactJS に触れて以来、ReactJ の仮想 DOM (Virtual DOM) とコンポーネントベースの開発に深く惹かれてきました。ReactJ のスタイルを一緒に体験しましょう~~ この記事は少し長いので、辛抱強く読んでください。素晴らしい理解がありました〜
1. ReactJS の紹介
React は、市場にあるすべての JavaScript MVC フレームワークに満足できなかったため、Instagram を構築するために独自のフレームワークを作成することにしました。 Webサイト。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。 React の設計思想は非常にユニークであるため、革命的なイノベーションであり、優れたパフォーマンスを備えており、コード ロジックは非常にシンプルです。そのため、将来の Web 開発の主流のツールになるのではないかと考え、注目し、使用する人が増えています。
ReactJS 公式ウェブサイトのアドレス: http://facebook.github.io/react/
Github アドレス: https://github.com/facebook/react
2 . ReactJS の理解と ReactJS の利点
まず、React についていくつかの誤解があります。
- React は完全な MVC フレームワークではありません。 MVC や React では、私は MVC 開発モデルにはあまり同意しません
- React のサーバー側の Render 機能は、その中核的な出発点ではなく、おまけとしてしか考えられません。サーバー側のアプリケーションについてはほとんど言及されていません
- React を使用する人は Web コンポーネントと同等ですが、この 2 つは完全に競合するものではありません
- React は新しいテンプレートではありません。 JSX は単なる表現であり、React は JSX なしでも動作します。
1. ReactJS の背景と原理
Web 開発では、常に変化するデータをリアルタイムに UI に反映し、DOM を操作する必要があります。複雑な DOM 操作や頻繁な DOM 操作は、通常、パフォーマンスのボトルネックの原因となります (高パフォーマンスの複雑な DOM 操作をどのように実行するかは、通常、フロントエンド開発者のスキルを示す重要な指標です)。React は、このために仮想 DOM (Virtual DOM) メカニズムを導入しています。一連の DOM API は、JavaScript を使用してブラウザ側に実装されます。 React に基づいて開発する場合、データが変更されるたびに、React は DOM ツリー全体を再構築して、DOM 構造の差異を取得します。その後、変更が必要な部分のみが実際のブラウザ DOM で更新されます。さらに、React は仮想 DOM をバッチ更新することができます。たとえば、イベント ループ (Event Loop) 内の 2 つのデータ変更は、ノードの内容を A から B に変更し、次に B から A に変更するとマージされます。 UI は変更されていないため、手動で制御する場合、通常、このロジックは非常に複雑になります。毎回完全な仮想DOMツリーを構築する必要があるが、仮想DOMはメモリデータであるためパフォーマンスが非常に高く、実DOM上ではDiff部分のみを操作することでパフォーマンスが向上する。
このようにして、パフォーマンスを確保しながら、開発者は、特定のデータ変更が 1 つ以上の特定の DOM 要素にどのように更新されるかに注意を払う必要がなくなり、インターフェイス全体が任意のデータ状態でどのようにレンダリングされるかを気にするだけで済みます。 。 の。
1990 年代のようにサーバー側レンダリングを使用して純粋な Web ページを作成したことがある場合は、サーバー側で行う必要があるのは、データに基づいて HTML をレンダリングし、ブラウザーに送信することだけであることを知っておく必要があります。ユーザーのクリックにより特定のステータス テキストを変更する必要がある場合は、ページ全体を更新することによっても変更できます。サーバーは、HTML のどの小さな部分が変更されたかを知る必要はなく、データに基づいてページ全体を更新することだけが必要です。つまり、UI の変更は全体の更新によって行われます。 React は、この開発モデルを高パフォーマンスの方法でフロントエンドにもたらします。インターフェイスを更新するたびに、ページ全体が更新されたように思えます。パフォーマンスを確保するために部分的な更新を実行する方法については、React フレームワークが行う必要があります。
React を紹介する Facebook のビデオのチャット アプリケーションの例を借用します。新しいメッセージが来たとき、開発プロセスは、どのデータが来たのか、そして新しい DOM ノードを追加する方法を知る必要があります。現在の DOM ツリー上で、React に基づいた開発アイデアは次のようになります。2 つのデータ間で UI がどのように変化するかは完全にフレームワークに任せられます。 React を使用するとロジックの複雑さが大幅に軽減され、開発の難易度が下がり、バグが発生する機会が少なくなることがわかります。
2. コンポーネント化
仮想 DOM (virtual-dom) は、単純な UI 開発ロジックをもたらすだけでなく、コンポーネント開発のアイデアももたらします。いわゆるコンポーネントは、独立した機能を備えたカプセル化された UI コンポーネントです。 Reactでは、コンポーネントという形でUIの構成を見直し、UI上で比較的独立した機能を持つ各モジュールをコンポーネントとして定義し、小さなコンポーネントを組み合わせたりネストしたりして大きなコンポーネントを形成し、最終的にUI全体の構築を完了することを推奨しています。たとえば、Facebook の instagram.com サイト全体は React を使用して開発されており、ページ全体が 1 つの大きなコンポーネントであり、そのコンポーネントには他のネストされたコンポーネントが多数含まれています。興味がある場合は、その背後にあるコードを確認してください。
MVC の考え方でビューデータコントローラーを分離できるのであれば、コンポーネントベースの考え方では UI 機能モジュール間の分離をもたらします。典型的なブログのコメント インターフェイスを通じて、MVC とコンポーネント開発のアイデアの違いを見てみましょう。
MVC 開発モデルの場合、開発者は 3 つを異なるクラスに定義して、パフォーマンス、データ、制御の分離を実現します。開発者は疎結合を実現するために、技術的な観点から UI をさらに分割します。
React の場合、機能の観点から見ると、開発者は UI をさまざまなコンポーネントに分割し、各コンポーネントは個別にパッケージ化されます。
React では、インターフェイス モジュールの自然な分割に従ってコードを整理し、記述します。コメント インターフェイスの場合、UI 全体は小さなコンポーネントで構成される大きなコンポーネントであり、各コンポーネントは独立したロジックの部分のみを処理します。お互いの。
React は、コンポーネントには次の特性が必要であると考えています:
(1) コンポーザブル: コンポーネントは、他のコンポーネントと一緒に使用したり、別のコンポーネント内にネストしたりするのが簡単です。コンポーネントが内部に別のコンポーネントを作成する場合、親コンポーネントはそのコンポーネントが作成した子コンポーネントを所有します。(2) 再利用可能: 各コンポーネントは独立した機能を持ち、使用できます。複数の UI シナリオで; (3) 保守可能: それぞれの小さなコンポーネントには独自のロジックのみが含まれているため、理解と保守が容易になります。 , こちらが
ダウンロードアドレスです。ダウンロードが完了すると、圧縮されたパッケージが表示されます。解凍後、新しい html ファイルを作成し、2 つの js ファイル (react.js と JSXTransformer.js) を参照します。 HTML テンプレートは次のとおりです (js パスを独自のパスに変更します):
<!DOCTYPE html><html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="container"></div> <script type="text/jsx"> // ** Our code goes here! ** </script> </body></html>
ここで誰もが疑問に思うかもしれませんが、 スクリプトの種類が text/jsx である理由は、React の独自の JSX 構文が JavaScript と互換性がないためです。 JSX を使用する場合は常に、type="text/jsx" を追加する必要があります。 次に、React には、react.js と JSXTransformer.js という 2 つのライブラリが用意されており、最初にロードする必要があります。このうち、JSXTransformer.js の機能は、JSX 構文を JavaScript 構文に変換することです。この手順は時間がかかり、実際にオンラインになっている場合はサーバー上で完了する必要があります。
ここでコードの記述を開始できます。まず、ReactJs の React.render メソッドについて理解しましょう: React.render は、テンプレートを HTML 言語に変換し、指定された DOM を挿入するために使用されます。ノード。
次に、Hello, world を出力するコードを script タグに記述します。コードは次のとおりです。
React.render( <h1>Hello, world!</h1>, document.getElementById('container') ); ここで、react は jQuery に依存しないことに注意してください。ただし、2 番目のパラメータは jQuery に依存しません。レンダリングでは JavaScript のネイティブ getElementByID メソッドを使用する必要があります。jQuery を使用して DOM ノードを選択することはできません。 次に、ブラウザでこのページを開くと、
タグを使用しているため、ブラウザに大きな「Hello, world」が表示されることがわかります。 おめでとうございます、ReactJS の扉に入りました~~ さて、ReactJ についてもっと学びましょう~
3. Jsx 構文HTML 言語は引用符を追加せずに JavaScript 言語で直接記述されます。 HTML と JavaScript の混合を可能にする JSX の構文。AngularJs を知っている場合は、次のコードを見ると非常に馴染みがあると思います。 var names = ['Jack', 'Tom', 'Alice']; React.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('container') ); ここで、name 配列を宣言し、Add します。 Hello をトラバーサルの前に実行し、DOM に出力します。出力結果は次のとおりです。
JSX を使用すると、JavaScript 変数をテンプレートに直接挿入できます。この変数が配列の場合、配列のすべてのメンバーが展開されます。 コードは次のとおりです:
var arr = [ <h1>Hello world!</h1>, <h2>React is perfect!</h2>, ]; React.render( <div>*{arr}*</div>, document.getElementById('container') ); 表示される結果は次のとおりです:
ここでのアスタリスクは識別用です。それに混乱している。
これが表示された場合は、React にかなり興味があることを意味します。おめでとうございます。さあ、React の「本当のスキル」を学び始めましょう~~ 準備はできていますか?
4. ReactJS コンポーネント
1コンポーネントのプロパティ
前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类。
下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：
var Greet = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); React.render( <Greet name="Jack" />, document.getElementById('container') ); 看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：
- 获取属性的值用的是this.props.属性名；
- 创建的组件名称首字母必须大写；
- 为元素添加css的class时，要用className.
- 组件的style属性的设置方式也值得注意，要写成style={{width:this.state.witdh}}.
2、组件状态
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：
var InputState = React.createClass({ getInitialState: function() { return {enable: false}; }, handleClick: function(event) { this.setState({enable: !this.state.enable}); }, render: function() { return ( <p> <input type="text" disabled={this.state.enable} /> <button onClick={this.handleClick}>Change State</button> </p> ); } }); React.render( <InputState />, document.getElementById('container') ); 这里，我们又使用到了一个方法getInitialState，这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。效果如下：
原理分析：
当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。
这里值得注意的几点如下：
- getInitialState函数必须有返回值，可以是NULL或者一个对象。
- 访问state的方法是this.state.属性名。
- 变量用{}包裹，不需要再加双引号。
3、组件的生命周期
组件的生命周期分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用；
- shouldComponentUpdate(object nextProps, objectnextState)：组件判断是否重新渲染时调用。
下面来看一个例子：
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); React.render( <Hello name="world"/>, document.body ); 上面代码在hello组件加载以后，通过 componentDidMount方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
4、组件的嵌套
React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：
var Search = React.createClass({ render: function() { return ( <div> {this.props.searchType}:<input type="text" /> <button>Search</button> </div> ); } }); var Page = React.createClass({ render: function() { return ( <div> <h1>Welcome!</h1> <Search searchType="Title" /> <Search searchType="Content" /> </div> ); } }); React.render( <Page />, document.getElementById('container') ); 这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属searchType传入值，最终显示结果如图：
五、ReactJs小结
关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：
- ReactJs はコンポーネントベースの開発に基づいているため、最終的にページはいくつかの小さなコンポーネントで構成される大きなコンポーネントになるはずです。
- 同様に、DOM 操作を実行したい場合は、内部結果を属性を通じてコンポーネントの内部に渡すこともできます (全員が学習できるようにしておきます)。特定の値が変更されると、値が状態に置かれます。
- 外部 CSS スタイルをコンポーネントに追加する場合は、クラス名を class ではなく className として記述する必要があります。内部スタイルを追加する場合は、style={{opacity: this.state.opacity}} とする必要があります。 {this.state .opacity};"。
- コンポーネント名の最初の文字は大文字にする必要があります。
- 変数名は {} で囲む必要があり、二重引用符で囲むことはできません。
6. 参考文献
- React の中国語ドキュメント
- React の入門サンプル チュートリアル
- 破壊的なフロントエンド UI 開発フレームワーク: React
著者: 霏霏記事の引用元: http: // /www.cnblogs.com/yunfeifei/