ReactJs 基礎チュートリアル - 基本編

1. ReactJS の紹介

React は Facebook の社内プロジェクトから生まれました。同社は市場にあるすべての JavaScript MVC フレームワークに満足していなかったため、Instagram ウェブサイトを構築するために独自のフレームワークを作成することにしました。開発後、このシステムは非常に有用であることがわかり、2013年5月に一般公開しました。 React の設計コンセプトは非常にユニークであるため、優れたパフォーマンスと非常にシンプルなコードロジックを備えた革新的なイノベーションです。そのため、将来的には Web 開発の主流ツールになるかもしれないと考え、注目して使用する人が増えています。

ReactJS 公式ウェブサイトアドレス: http://facebook.github.io/react/

Githubアドレス: https://github.com/facebook/react

2. ReactJSの理解とReactJSの利点

まず、React についてはいくつか誤解されている点があるので、ここでまとめておきます。

React は完全な MVC フレームワークではありません。せいぜい MVC の V (View) と考えることができます。React でさえ、MVC 開発モデルを完全には認識していません。
React のサーバー側レンダリング機能は、あったら便利な機能に過ぎず、React の中心的な目的ではありません。実際、React の公式 Web サイトでは、サーバー側アプリケーションについてはほとんど触れられていません。
React と Web コンポーネントを比較する人もいますが、この 2 つは完全に競合するものではありません。React を使用すると、実際の Web コンポーネントを開発できます。
React は新しいテンプレート言語ではなく、JSX は単なる表現であり、React は JSX がなくても動作します。

1. ReactJSの背景と原則

Web開発では、常に変化するデータをリアルタイムでUIに反映する必要があるため、DOMを操作する必要があります。複雑な DOM 操作や頻繁な DOM 操作は、通常、パフォーマンスのボトルネックの原因となります (高パフォーマンスの複雑な DOM 操作を実行する方法は、通常、フロントエンド開発者のスキルの重要な指標となります)。 React はこの目的のために仮想 DOM メカニズムを導入しました。ブラウザ側で JavaScript を使用して一連の DOM API が実装されました。 React をベースに開発する場合、すべての DOM 構築は仮想 DOM を通じて実行されます。データが変更されるたびに、React は DOM ツリー全体を再構築します。次に、React は現在の DOM ツリー全体を以前の DOM ツリーと比較して DOM 構造の違いを取得し、変更が必要な部分に対してのみ実際のブラウザ DOM 更新を実行します。 React は仮想 DOM をバッチ更新することもできます。イベントループ内の 2 つのデータ変更はマージされます。たとえば、ノードのコンテンツを A から B に、次に B から A に連続的に変更すると、React は UI が変更されていないと判断します。手動で制御する場合、このロジックは通常、非常に複雑になります。毎回完全な仮想DOMツリーを構築する必要がありますが、仮想DOMはメモリデータであるためパフォーマンスが非常に高く、実際のDOM上ではDiff部分のみを操作するため、パフォーマンス向上の目的を達成できます。このように、開発者はパフォーマンスを確保しながら、特定のデータの変更が 1 つ以上の特定の DOM 要素にどのように更新されるかを心配する必要がなくなり、あらゆるデータ状態でインターフェイス全体がどのようにレンダリングされるかだけを気にすればよいことになります。

1990 年代のように純粋にサーバー側でレンダリングされる Web ページを作成したことがあるなら、サーバーが行う必要があるのは、データに基づいて HTML をレンダリングし、それをブラウザーに送信することだけであることがわかるはずです。ユーザーのクリックによりステータステキストを変更する必要がある場合も、ページ全体を更新することで実行されます。サーバーは、HTML のどの小さなセクションが変更されたかを知る必要はなく、データに基づいてページ全体を更新するだけで済みます。つまり、UI の変更はすべて全体的な更新を通じて行われます。 React は、この開発モデルを高性能な方法でフロントエンドに導入します。インターフェースを更新するたびに、ページ全体がリフレッシュされると考えることができます。パフォーマンスを確保するためにローカル更新を実行する方法については、React フレームワークが実現する必要があるものです。

Facebook の React 紹介動画のチャットアプリケーションの例を使用すると、新しいメッセージが届いたとき、従来の開発の考え方は上記のようになります。開発プロセスでは、どのデータが届いたか、新しい DOM ノードを現在の DOM ツリーにどのように追加するかを把握する必要があります。React に基づく開発の考え方は、以下のようになります。データ全体だけを気にすればよく、2 つのデータ間で UI がどのように変化するかは、フレームワークに完全に任せられます。ご覧のとおり、React を使用するとロジックの複雑さが大幅に軽減され、開発の難易度が下がり、バグが発生する可能性が低くなります。

2. コンポーネント化

仮想 DOM は、シンプルな UI 開発ロジックをもたらすだけでなく、コンポーネントベースの開発という考え方をもたらします。いわゆるコンポーネントは、独立した機能を持つカプセル化された UI パーツです。 React では、UI の構成をコンポーネントの形で再考し、UI 上の比較的独立した各機能モジュールをコンポーネントとして定義し、小さなコンポーネントを組み合わせたりネストしたりして大きなコンポーネントを形成し、最終的に UI 全体の構築を完了することを推奨しています。たとえば、Facebook の instagram.com は完全に React で開発されています。ページ全体が大きなコンポーネントであり、その中に多数の他のネストされたコンポーネントが含まれています。興味があれば、その背後にあるコードを見ることができます。

MVC の考え方によってビュー、データ、コントローラーを分離できるのに対し、コンポーネントベースの考え方では UI 機能モジュール間の分離が実現します。典型的なブログコメントインターフェイスを使用して、MVC とコンポーネントベースの開発の考え方の違いを確認します。

MVC 開発モデルでは、開発者はプレゼンテーション、データ、制御の分離を実現するために、これら 3 つを異なるクラスとして定義します。開発者は、疎結合を実現するために技術的な観点から UI を分割する傾向があります。

React にとって、これはまったく新しいアイデアです。開発者は機能的な観点から UI をさまざまなコンポーネントに分割し、各コンポーネントを独立してカプセル化します。

React では、インターフェースモジュールが自然に分割されるようにコードを整理して記述します。コメントインターフェースの場合、UI 全体は小さなコンポーネントで構成された大きなコンポーネントです。各コンポーネントはロジックの独自の部分のみを考慮し、互いに独立しています。

React では、コンポーネントには次の特性が必要であると考えています。

(1) 構成可能: コンポーネントは他のコンポーネントと一緒に簡単に使用したり、別のコンポーネント内にネストしたりできます。コンポーネントが内部に別のコンポーネントを作成する場合、親コンポーネントは作成した子コンポーネントを所有していると言われます。この機能により、複雑な UI を複数の単純な UI コンポーネントに分割できます。

（２）再利用可能：各コンポーネントは独立した機能を持ち、複数のUIシナリオで使用できます。

（３）保守性：各小さなコンポーネントには独自のロジックのみが含まれているため、理解しやすく保守も容易です。

3. ReactJSをダウンロードしてHello, worldを書く

ReactJs はダウンロードが非常に簡単です。ご参考までに、ダウンロードアドレスは http://facebook.github.io/react/downloads.html です。ダウンロードが完了すると、圧縮されたパッケージが表示されます。解凍後、新しい HTML ファイルを作成し、 react.js と JSXTransformer.js の 2 つの js ファイルを参照します。 HTML テンプレートは次のとおりです (js パスを独自のものに変更してください)。

<!DOCTYPE html>
<html>
 <ヘッド>
 <script src="build/react.js"></script>
 <script src="build/JSXTransformer.js"></script>
 </head>
 <本文>
 <div id="コンテナ"></div>
 <script type="text/jsx">
  // ** ここにコードを記述します! **
 </スクリプト>
 </本文>
</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 は React の最も基本的なメソッドであり、テンプレートを HTML 言語に変換し、指定された DOM ノードに挿入するために使用されます。

次に、スクリプトタグに Hello, world を出力するコードを記述します。コードは次のとおりです。

React.render() で
  <h1>こんにちは、世界！</h1>、
  document.getElementById('コンテナ')
  );

ここで注目すべきは、 react は jQuery に依存していないということです。もちろん、 jQuery を使用することもできますが、 render の 2 番目のパラメータには JavaScript のネイティブ getElementByID メソッドを使用する必要があり、 jQuery を使用して DOM ノードを選択することはできません。

次に、このページをブラウザで開くと、<h1> タグを使用したため、ブラウザに大きな「Hello, world」が表示されることがわかります。

この時点で、おめでとうございます、あなたはReactJSの扉を踏み入れました~~次は、ReactJsをさらに学びましょう~~

4. JSX構文

HTML 言語は、引用符なしで JavaScript 言語で直接記述されます。これは、HTML と JavaScript を混在させることができる JSX の構文です。AngularJs について学んだことがあれば、次のコードに非常に馴染みがあるでしょう。コードを見てみましょう。

var names = ['ジャック', 'トム', 'アリス'];

  React.render() で
  <div>
  {
   names.map(関数 (名前) {
   <div>こんにちは、{name}さん！</div> を返します。
   })
  }
  </div>,
  document.getElementById('コンテナ')
  );

ここでは、名前配列を宣言し、それをトラバースしてその前に Hello を追加し、DOM に出力します。出力結果は次のようになります。

JSX を使用すると、テンプレートに JavaScript 変数を直接挿入できます。変数が配列の場合、配列のすべてのメンバーが展開されます。コードは次のとおりです。

var arr = [
  <h1>こんにちは世界！</h1>、
  Reactは完璧です！
  ];
  React.render() で
  <div>*{arr}*</div>,
  document.getElementById('コンテナ')
  );

結果は次のとおりです。

ここのアスタリスクは識別用ですので、混乱しないでください~~

ここまで読んできたということは、React にかなり興味があるということです。おめでとうございます。ここまで読みました。それでは、React の本当のスキルを学び始めましょう。準備はいいですか?

5. ReactJSコンポーネント

1. コンポーネントのプロパティ

前述のように、ReactJS はコンポーネントベースの開発に基づいています。それでは、ReactJS のコンポーネントについて学習してみましょう。React を使用すると、コードをコンポーネントにカプセル化し、通常の HTML タグを挿入するのと同じように、Web ページにコンポーネントを挿入できます。 React.createClass メソッドは、コンポーネントクラスを生成するために使用されます。

次に、name 属性を持ち、hello + name の値を出力する最初のコンポーネント Greet を記述します。コードは次のとおりです。

var Greet = React.createClass({
  レンダリング: 関数() {
   <h1>Hello {this.props.name}</h1> を返します。
  }
  });

  React.render() で
  <挨拶 name="Jack" />、
  document.getElementById('コンテナ')
  );

このコードを見ると、AngularJS に触れたことのある友人は馴染みがあると感じるかもしれませんが、いくつか注意すべき点があります。

1. プロパティの値を取得するには、this.props.property name を使用します。

2. 作成されたコンポーネント名の最初の文字は大文字にする必要があります。

3. 要素に CSS クラスを追加するときは、className を使用します。

4. コンポーネントのスタイル属性がどのように設定されているかにも注目してください。style={{width: this.state.witdh}} と記述する必要があります。

2. コンポーネントの状態

コンポーネントは必然的にユーザーと対話します。React の大きな革新の 1 つは、コンポーネントをステートマシンとして見ることです。最初は初期状態があり、その後、ユーザーの操作によって状態が変化し、UI の再レンダリングがトリガーされます。テキストボックスとボタンを使った小さな例を書いてみましょう。ボタンをクリックすると、テキストボックスの編集状態を編集禁止または編集許可に変更できます。この例を使用して、ReactJS の状態メカニズムを理解します。まずはコードを見てみましょう:

var InputState = React.createClass({
  初期状態を取得する: 関数() {
   {enable: false} を返します。
  },
  handleClick: 関数(イベント) {
   this.setState({enable: !this.state.enable});
  },
  レンダリング: 関数() {
   
   戻る （
   <p>
    <input type="text" 無効 = {this.state.enable} />
    <button onClick={this.handleClick}>状態の変更</button>
   </p>
   );
  }
  });

  React.render() で
  <入力状態 />,
  document.getElementById('コンテナ')
  );

ここで、getInitialState メソッドを再度使用します。この関数は、コンポーネントが初期化されるときに実行され、NULL またはオブジェクトを返す必要があります。ここでは、this.state. 属性名を通じて属性値にアクセスできます。ここでは、enable 値を入力の disabled 値にバインドします。この属性値を変更する場合は、setState メソッドを使用します。 state.enable の値を変更するために、ボタンにバインドする handleClick メソッドを宣言します。効果は次のようになります。

原則分析:

ユーザーがコンポーネントをクリックして状態が変化すると、this.setState メソッドが状態の値を変更します。変更するたびに、this.render メソッドが自動的に呼び出され、コンポーネントが再度レンダリングされます。

ここで注目すべき点は次のとおりです。

1. getInitialState 関数には戻り値が必要です。戻り値は NULL またはオブジェクトになります。

2. 状態にアクセスするメソッドは this.state.property 名です。

3. 変数は {} で囲まれ、二重引用符は必要ありません。

3. コンポーネントのライフサイクル

コンポーネントのライフサイクルは、次の 3 つの状態に分かれています。

マウント: 実際のDOMに挿入
更新中: 再レンダリング中
アンマウント: 実際のDOMから移動

React は各状態に対して 2 つの処理関数を提供します。will 関数は状態に入る前に呼び出され、did 関数は状態に入った後に呼び出されます。3 つの状態に対して合計 5 つの処理関数があります。

コンポーネントマウント()
コンポーネントマウント()
コンポーネントWillUpdate(オブジェクト nextProps、オブジェクト nextState)
コンポーネント更新(オブジェクト prevProps、オブジェクト prevState)
コンポーネントのマウントを解除します()

さらに、React は 2 つの特別な状態処理関数も提供します。

componentWillReceiveProps(object nextProps): 読み込まれたコンポーネントが新しいパラメータを受け取ったときに呼び出されます
shouldComponentUpdate(object nextProps, object nextState): コンポーネントが再レンダリングするかどうかを決定するときに呼び出されます

例を見てみましょう:

var Hello = React.createClass({
  getInitialState: 関数 () {
   戻る {
   不透明度: 1.0
   };
  },

  コンポーネントDidMount: 関数() {
   this.timer = setInterval(関数() {
   不透明度を this.state.opacity に設定します。
   不透明度 -= .05;
   不透明度 < 0.1 の場合 {
    不透明度 = 1.0;
   }
   this.setState({
    不透明度: 不透明度
   });
   }.bind(これ), 100);
  },

  レンダリング: 関数 () {
   戻る （
   <div style={{不透明度: this.state.opacity}}>
    こんにちは {this.props.name}
   </div>
   );
  }
  });

  React.render() で
  <こんにちは name="world"/>、
  文書本体
  );

hello コンポーネントが読み込まれた後、上記のコードは、componentDidMount メソッドを通じてタイマーを設定し、100 ミリ秒ごとにコンポーネントの透明度をリセットして、再レンダリングをトリガーします。

4. コンポーネントのネスト

React はコンポーネントベースの開発に基づいていますが、コンポーネントベースの開発の最大の利点は何でしょうか?再利用であることは間違いありません。React でコンポーネントの再利用を実装する方法を見てみましょう。ここでは例を書いてみます。コードは次のとおりです。

var Search = React.createClass({
  レンダリング: 関数() {
   戻る （
   <div>
    {this.props.searchType}:<入力タイプ="テキスト" />
    <button>検索</button>
   </div>
   );
  }
  });
  var Page = React.createClass({
  レンダリング: 関数() {
   戻る （
   <div>
    <h1>ようこそ！</h1>
    <検索 searchType="タイトル" />
    <検索 searchType="コンテンツ" />
   </div>
   );
  }
  });
  React.render() で
  <ページ />,
  document.getElementById('コンテナ')
  );

ここでは、Search コンポーネントを作成し、次に Page コンポーネントを作成します。次に、Page コンポーネント内で Search コンポーネントを呼び出し、それを 2 回呼び出します。ここでは、属性 searchType を通じて値を渡し、最終結果を図に示します。

6. ReactJs のまとめ

今日ReactJSについて学んだことは以上です。以下にまとめます。主に以下の点です。

1. ReactJs はコンポーネントベースの開発に基づいているため、最終的にはページはいくつかの小さなコンポーネントで構成された大きなコンポーネントになります。

2. 属性を介してコンポーネントに値を渡すことができます。同様に、属性を介して親コンポーネントに内部結果を渡すことができます（各自の学習に残しておきます）。特定の値の変更に対して DOM 操作を実行する場合は、これらの値を状態にします。

3. コンポーネントに外部 CSS スタイルを追加する場合、クラス名は class ではなく className と記述する必要があります。内部スタイルを追加する場合は、style="opacity:{this.state.opacity};" ではなく style={{opacity: this.state.opacity}} と記述する必要があります。

4. コンポーネント名の最初の文字は大文字にする必要があります。

5. 変数名は {} で囲む必要があり、二重引用符を含めないでください。

6. 参考文献

React 中国語ドキュメント http://reactjs.cn/

React 入門チュートリアル http://www.ruanyifeng.com/blog/2015/03/react.html

Subversion フロントエンド UI 開発フレームワーク: React http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react

これで、ひと目でわかるReactJs基礎チュートリアル-エッセンス編-の記事は終了です。より関連性の高いReactJsチュートリアルコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: